<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <span>首页</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>在线巡查</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">巡查功能</span>
                </div>
                <!-- 巡查概览统计 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4">
                            <i class="fas fa-clipboard-list text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">待巡查任务</div>
                            <div class="text-2xl font-bold text-gray-900">24</div>
                            <div class="text-xs text-red-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 较上周增加 5 项
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4">
                            <i class="fas fa-check-circle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">已完成任务</div>
                            <div class="text-2xl font-bold text-gray-900">156</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 完成率 86.7%
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4">
                            <i class="fas fa-exclamation-triangle text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">异常发现</div>
                            <div class="text-2xl font-bold text-gray-900">42</div>
                            <div class="text-xs text-gray-500">占比 23.3%</div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
                        <div
                            class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                            <i class="fas fa-tasks text-xl"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">整改完成率</div>
                            <div class="text-2xl font-bold text-gray-900">78%</div>
                            <div class="text-xs text-green-600 flex items-center">
                                <i class="fas fa-arrow-up mr-1"></i> 较上月提升 5.2%
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查任务管理 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">巡查任务管理</h2>
                        <div class="flex space-x-3">
                            <button @click="showFilterModal = true"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-filter mr-2"></i> 筛选
                            </button>
                            <button
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                @click="showNewTaskModal = true">
                                <i class="fas fa-plus mr-2"></i> 新建巡查任务
                            </button>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-6">
                        <!-- 任务列表 -->
                        <div class="col-span-2">
                            <div class="flex justify-between items-center mb-3">
                                <div class="flex space-x-2">
                                    <button v-for="(tab, index) in taskTabs" :key="index"
                                        class="px-3 py-1.5 text-sm rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                        :class="tab.active ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'"
                                        @click="setActiveTaskTab(index)">
                                        {{ tab.name }} ({{ tab.count }})
                                    </button>
                                </div>
                                <div class="relative">
                                    <input type="text" placeholder="搜索任务" v-model="taskSearchQuery"
                                        class="w-64 bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <i
                                        class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                                </div>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                任务名称</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                巡查企业</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                巡查类型</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                负责人</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                计划时间</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                状态</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="(task, index) in paginatedTasks" :key="index"
                                            class="hover:bg-gray-50">
                                            <td class="px-4 py-3">
                                                <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                                                <div class="text-xs text-gray-500">{{ task.code }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ task.company }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ task.type }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ task.owner }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ task.scheduledDate }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="task.statusClass">
                                                    {{ task.status }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                                <div class="flex space-x-2">
                                                    <button @click="showTaskDetails(task)"
                                                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                                    <button v-if="task.statusType === 'pending'"
                                                        @click="executeTask(task)"
                                                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">执行</button>
                                                    <button v-if="task.statusType === 'inProgress'"
                                                        @click="submitTask(task)"
                                                        class="text-indigo-600 hover:text-indigo-800 !rounded-button whitespace-nowrap cursor-pointer">提交</button>
                                                    <button v-if="task.statusType === 'completed'"
                                                        @click="viewTaskReport(task)"
                                                        class="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap cursor-pointer">报告</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="text-sm text-gray-500">显示 {{ (currentPage - 1) * pageSize + 1 }} 至 {{
                                    Math.min(currentPage * pageSize, filteredTasks.length) }} 条，共 {{
                                    filteredTasks.length }} 条</div>
                                <div class="flex space-x-1">
                                    <button
                                        class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                        :disabled="currentPage === 1"
                                        @click="currentPage = currentPage - 1">上一页</button>

                                    <button v-for="page in pageNumbers" :key="page"
                                        class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                        :class="page === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
                                        @click="currentPage = page">{{ page }}</button>

                                    <button
                                        class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                        :disabled="currentPage === totalPages"
                                        @click="currentPage = currentPage + 1">下一页</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 巡查日历 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3 flex items-center justify-between">
                                <span>巡查日历</span>
                                <div class="flex items-center space-x-2">
                                    <button @click="prevMonth"
                                        class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
                                        <i class="fas fa-chevron-left"></i>
                                    </button>
                                    <span class="text-sm">{{ calendarYear }}年{{ calendarMonth }}月</span>
                                    <button @click="nextMonth"
                                        class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer">
                                        <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </h3>
                            <div class="calendar-container">
                                <!-- 星期标题 -->
                                <div class="grid grid-cols-7 gap-1 mb-1">
                                    <div v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day"
                                        class="text-center text-xs text-gray-500 py-1">
                                        {{ day }}
                                    </div>
                                </div>
                                <!-- 日历日期 -->
                                <div class="grid grid-cols-7 gap-1">
                                    <div v-for="date in calendarDates" :key="date.day"
                                        class="aspect-square p-1 text-center border rounded-sm flex flex-col items-center justify-start cursor-pointer"
                                        :class="getDateClass(date)" @click="selectDate(date)">
                                        <span class="text-xs w-5 h-5 flex items-center justify-center rounded-full"
                                            :class="{ 'bg-blue-600 text-white': isToday(date) || isSelected(date) }">
                                            {{ date.day }}
                                        </span>
                                        <div v-if="date.tasks"
                                            class="w-full mt-1 flex flex-col items-center space-y-1">
                                            <div v-for="(taskCount, type) in date.tasks" :key="type"
                                                class="w-full h-1.5 rounded-full" :class="getTaskTypeClass(type)">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 今日任务 -->
                            <div class="mt-4">
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">今日任务 (2025-07-08)</h4>
                                <div class="space-y-2">
                                    <div v-for="(task, index) in todayTasks" :key="index"
                                        class="p-2 rounded-md text-xs flex items-center"
                                        :class="getTaskCardClass(task.statusType)">
                                        <span class="w-2 h-2 rounded-full mr-2"
                                            :class="getTaskDotClass(task.statusType)"></span>
                                        <div class="flex-1">
                                            <div class="font-medium">{{ task.name }}</div>
                                            <div class="text-xs opacity-80">{{ task.company }}</div>
                                        </div>
                                        <div class="text-xs">{{ task.time }}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- 图例 -->
                            <div class="mt-4 flex items-center justify-between text-xs text-gray-600">
                                <div class="flex items-center">
                                    <span class="w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
                                    <span>常规巡查</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="w-3 h-3 rounded-full bg-yellow-500 mr-1"></span>
                                    <span>专项巡查</span>
                                </div>
                                <div class="flex items-center">
                                    <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
                                    <span>应急巡查</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查计划制定 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">巡查计划制定</h2>
                        <div class="flex space-x-3">
                            <button
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                @click="exportPlan">
                                <i class="fas fa-file-export mr-2"></i> 导出计划
                            </button>
                            <button
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                                @click="showNewPlanModal = true">
                                <i class="fas fa-calendar-plus mr-2"></i> 制定巡查计划
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-6">
                        <!-- 计划列表 -->
                        <div class="col-span-2">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                计划名称</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                计划周期</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                巡查企业数</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                巡查内容</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                负责部门</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                状态</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="(plan, index) in inspectionPlans" :key="index"
                                            class="hover:bg-gray-50">
                                            <td class="px-4 py-3">
                                                <div class="text-sm font-medium text-gray-900">{{ plan.name }}</div>
                                                <div class="text-xs text-gray-500">{{ plan.code }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ plan.period }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ plan.companyCount }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ plan.content }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ plan.department }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="plan.statusClass">
                                                    {{ plan.status }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                                <div class="flex space-x-2">
                                                    <button @click="showPlanDetails(plan)"
                                                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                                    <button @click="editPlan(plan, index)"
                                                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">编辑</button>
                                                    <button  @click="deletePlan(index)"
                                                        class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer">删除</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 详情弹框 -->
                        <div v-if="showDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                            <div class="bg-white rounded-lg shadow-lg w-3/4 max-w-4xl max-h-3/4 overflow-auto">
                                <div class="p-6">
                                    <div class="flex justify-between items-center mb-4">
                                        <h2 class="text-xl font-bold text-gray-800">巡查计划详情</h2>
                                        <button @click="showDetailModal = false" class="text-gray-500 hover:text-gray-700">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="grid grid-cols-2 gap-4 mb-6">
                                        <div>
                                            <p class="text-sm text-gray-600 mb-1">计划名称</p>
                                            <p class="text-base font-medium">{{ selectedPlan.name }}</p>
                                        </div>
                                        <div>
                                            <p class="text-sm text-gray-600 mb-1">计划时间</p>
                                            <p class="text-base font-medium">{{ selectedPlan.period }}</p>
                                        </div>
                                        <div>
                                            <p class="text-sm text-gray-600 mb-1">企业数量</p>
                                            <p class="text-base font-medium">{{ selectedPlan.companyCount }}</p>
                                        </div>
                                        <div>
                                            <p class="text-sm text-gray-600 mb-1">负责部门</p>
                                            <p class="text-base font-medium">{{ selectedPlan.department }}</p>
                                        </div>
                                        <div class="col-span-2">
                                            <p class="text-sm text-gray-600 mb-1">计划内容</p>
                                            <p class="text-base font-medium">{{ selectedPlan.content }}</p>
                                        </div>
                                        <div>
                                            <p class="text-sm text-gray-600 mb-1">状态</p>
                                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="selectedPlan.statusClass">
                                                {{ selectedPlan.status }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="flex justify-end">
                                        <button @click="showDetailModal = false" 
                                            class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
                                            关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 计划完成情况 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">计划完成情况</h3>
                            <div id="planCompletionChart" class="h-64" ref="planCompletionChart"></div>
                            <div class="mt-4">
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">计划执行统计</h4>
                                <div class="space-y-2">
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">已完成计划</span>
                                        <span class="font-medium text-gray-900">12 个</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">执行中计划</span>
                                        <span class="font-medium text-gray-900">5 个</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">未开始计划</span>
                                        <span class="font-medium text-gray-900">3 个</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">计划完成率</span>
                                        <span class="font-medium text-green-600">60%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查记录查询 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">巡查记录查询</h2>
                        <div class="flex space-x-3">
                            <div @click="exportRecords"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-download mr-2"></i> 导出记录
                            </div>
                            <div @click="toggleAdvancedSearch"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-search mr-2"></i> 高级搜索
                            </div>
                        </div>
                    </div>
                    <!-- 搜索筛选区域 -->
                    <div class="grid grid-cols-5 gap-4 mb-4">
                        <!-- 企业名称搜索 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">企业名称</label>
                            <div class="relative">
                                <input type="text" placeholder="请输入企业名称" 
                                    v-model="recordFilterCriteria.company"
                                    @input="handleFilterChange"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i
                                    class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                        <!-- 巡查类型 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查类型</label>
                            <div class="relative">
                                <select v-model="recordFilterCriteria.type" 
                                    @change="handleFilterChange"
                                    class="w-full bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer appearance-none">
                                    <option value="">全部类型</option>
                                    <option value="常规巡查">常规巡查</option>
                                    <option value="专项巡查">专项巡查</option>
                                    <option value="突击巡查">突击巡查</option>
                                </select>
                                <i class="fas fa-chevron-down text-xs absolute right-3 top-1/2 transform -translate-y-1/2"></i>
                            </div>
                        </div>
                        <!-- 巡查结果 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查结果</label>
                            <div class="relative">
                                <select v-model="recordFilterCriteria.result" 
                                    @change="handleFilterChange"
                                    class="w-full bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer appearance-none">
                                    <option value="">全部结果</option>
                                    <option value="合格">合格</option>
                                    <option value="不合格">不合格</option>
                                </select>
                                <i class="fas fa-chevron-down text-xs absolute right-3 top-1/2 transform -translate-y-1/2"></i>
                            </div>
                        </div>
                        <!-- 巡查人员 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查人员</label>
                            <div class="relative">
                                <input type="text" placeholder="请输入巡查人员" 
                                    v-model="recordFilterCriteria.inspector"
                                    @input="handleFilterChange"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            </div>
                        </div>
                        <!-- 时间范围 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查时间范围</label>
                            <div class="relative">
                                <button @click="toggleTimeRangeDropdown"
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-1.5 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer">
                                    <span>{{ recordFilterCriteria.timeRange || '全部时间' }}</span>
                                    <i class="fas fa-calendar-alt text-xs"></i>
                                </button>
                                <!-- 时间范围下拉菜单 -->
                                <div v-if="showTimeRangeDropdown"
                                    class="absolute z-20 mt-1 w-full bg-white rounded-md shadow-lg border border-gray-200">
                                    <div class="py-1">
                                        <button v-for="range in timeRangeOptions" :key="range" type="button"
                                            @click="selectTimeRange(range)"
                                            class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors">
                                            {{ range }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 高级搜索面板 -->
                    <div v-if="showAdvancedSearchPanel" class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium text-gray-700">高级搜索选项</h4>
                            <button @click="clearAllFilters" 
                                class="text-sm text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-times mr-1"></i>清空所有筛选条件
                            </button>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <!-- 记录编号搜索 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">记录编号</label>
                                <div class="relative">
                                    <input type="text" placeholder="请输入记录编号" 
                                        v-model="recordFilterCriteria.recordId"
                                        @input="handleFilterChange"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <i class="fas fa-search text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/2"></i>
                                </div>
                            </div>
                            
                            <!-- 搜索结果排序 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">排序方式</label>
                                <div class="relative">
                                    <select v-model="currentSortOption" 
                                        @change="handleSortChange"
                                        class="w-full bg-white border border-gray-300 rounded px-3 py-1.5 text-sm !rounded-button whitespace-nowrap cursor-pointer appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <option v-for="option in sortOptions" :key="option.value" :value="option.value">
                                            {{ option.label }}
                                        </option>
                                    </select>
                                    <i class="fas fa-chevron-down text-xs absolute right-3 top-1/2 transform -translate-y-1/2"></i>
                                </div>
                            </div>
                            
                            <!-- 搜索统计信息 -->
                            <div class="flex items-end">
                                <div class="text-sm text-gray-600">
                                    <div>共找到 <span class="font-medium text-blue-600">{{ filteredRecords.length }}</span> 条记录</div>
                                    <div class="text-xs text-gray-500 mt-1">当前显示第 {{ recordCurrentPage }} 页</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 记录列表 -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        记录编号</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        巡查企业</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        巡查类型</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        巡查人员</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        巡查时间</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        巡查结果</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        异常数量</th>
                                    <th
                                        class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(record, index) in paginatedRecords" :key="index" class="hover:bg-gray-50">
                                    <td class="px-4 py-3">
                                        <div class="text-sm font-medium text-gray-900">{{ record.id }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ record.company }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ record.type }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ record.inspector }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ record.date }}</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="record.resultClass">
                                            {{ record.result }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900">{{ record.issueCount }}</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="showRecordDetails(record)"
                                                class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">详情</button>
                                            <button @click="viewRecordReport(record)"
                                                class="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap cursor-pointer">报告</button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="flex justify-between items-center mt-4">
                        <div class="text-sm text-gray-500">显示 {{ (recordCurrentPage - 1) * recordPageSize + 1 }} 至 {{ Math.min(recordCurrentPage * recordPageSize, filteredRecords.length) }} 条，共 {{ filteredRecords.length }} 条</div>
                        <div class="flex space-x-1">
                            <button
                                class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                :disabled="recordCurrentPage === 1"
                                :class="{'opacity-50': recordCurrentPage === 1}"
                                @click="recordCurrentPage = recordCurrentPage - 1">上一页</button>

                            <button v-for="page in recordPageNumbers" :key="page"
                                class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                :class="page === recordCurrentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
                                @click="recordCurrentPage = page">{{ page }}</button>

                            <button
                                class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer"
                                :disabled="recordCurrentPage === recordTotalPages"
                                :class="{'opacity-50': recordCurrentPage === recordTotalPages}"
                                @click="recordCurrentPage = recordCurrentPage + 1">下一页</button>
                        </div>
                    </div>
                    
                    <!-- 巡查记录详情弹框 -->
                    <div v-if="showRecordDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                        <div class="bg-white rounded-lg shadow-lg w-3/4 max-w-4xl max-h-3/4 overflow-auto">
                            <div class="p-6">
                                <div class="flex justify-between items-center mb-4">
                                    <h2 class="text-xl font-bold text-gray-800">巡查记录详情</h2>
                                    <button @click="showRecordDetailModal = false" class="text-gray-500 hover:text-gray-700">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                        </svg>
                                    </button>
                                </div>
                                <div class="grid grid-cols-2 gap-4 mb-6">
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">记录编号</p>
                                        <p class="text-base font-medium">{{ selectedRecord.id }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">巡查企业</p>
                                        <p class="text-base font-medium">{{ selectedRecord.company }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">巡查类型</p>
                                        <p class="text-base font-medium">{{ selectedRecord.type }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">巡查人员</p>
                                        <p class="text-base font-medium">{{ selectedRecord.inspector }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">巡查时间</p>
                                        <p class="text-base font-medium">{{ selectedRecord.date }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">巡查结果</p>
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="selectedRecord.resultClass">
                                            {{ selectedRecord.result }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-600 mb-1">异常数量</p>
                                        <p class="text-base font-medium">{{ selectedRecord.issueCount }}</p>
                                    </div>
                                </div>
                                <div class="flex justify-end">
                                    <button @click="showRecordDetailModal = false" 
                                        class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">
                                        关闭
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查报告 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-2">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">巡查报告管理</h2>
                        <div class="flex space-x-3">
                            <button
                                @click="openReportTemplateModal"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-cog mr-2"></i> 报告模板
                            </button>
                            <button
                                @click="generatePatrolReport"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-file-alt mr-2"></i> 生成巡查报告
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-6">
                        <!-- 报告列表 -->
                        <div class="col-span-2">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                报告名称</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                报告类型</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                关联企业</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                生成时间</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                生成人员</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                状态</th>
                                            <th
                                                class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="(report, index) in paginatedReports" :key="index"
                                            class="hover:bg-gray-50">
                                            <td class="px-4 py-3">
                                                <div class="text-sm font-medium text-gray-900">{{ report.name }}</div>
                                                <div class="text-xs text-gray-500">{{ report.id }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ report.type }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ report.company }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ report.date }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <div class="text-sm text-gray-900">{{ report.creator }}</div>
                                            </td>
                                            <td class="px-4 py-3">
                                                <span
                                                    class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                    :class="report.statusClass">
                                                    {{ report.status }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                                                <div class="flex space-x-2">
                                                    <button @click="viewReport(report)"
                                                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">查看</button>
                                                    <button @click="downloadReport(report)"
                                                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer">下载</button>
                                                    <button @click="deleteReport(report, index)"
                                                        class="text-red-600 hover:text-red-800 !rounded-button whitespace-nowrap cursor-pointer">删除</button>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="flex justify-between items-center mt-4">
                                <div class="text-sm text-gray-500">
                                    显示 {{ (reportCurrentPage - 1) * reportPageSize + 1 }} 至 
                                    {{ Math.min(reportCurrentPage * reportPageSize, inspectionReports.length) }} 条，
                                    共 {{ inspectionReports.length }} 条
                                </div>
                                <div class="flex space-x-1">
                                    <button
                                        :disabled="reportCurrentPage === 1"
                                        :class="{'opacity-50': reportCurrentPage === 1}"
                                        @click="reportCurrentPage = reportCurrentPage - 1"
                                        class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer">
                                        上一页
                                    </button>
                                    <button
                                        v-for="page in reportPageNumbers"
                                        :key="page"
                                        :class="page === reportCurrentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'"
                                        @click="reportCurrentPage = page"
                                        :disabled="page === '...'"
                                        class="px-3 py-1 rounded !rounded-button whitespace-nowrap cursor-pointer">
                                        {{ page }}
                                    </button>
                                    <button
                                        :disabled="reportCurrentPage === reportTotalPages"
                                        :class="{'opacity-50': reportCurrentPage === reportTotalPages}"
                                        @click="reportCurrentPage = reportCurrentPage + 1"
                                        class="px-3 py-1 bg-gray-100 text-gray-600 rounded !rounded-button whitespace-nowrap cursor-pointer">
                                        下一页
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- 报告统计 -->
                        <div class="bg-gray-50 rounded-lg p-4 h-full">
                            <h3 class="font-bold text-base text-gray-800 mb-3">报告统计分析</h3>
                            <div id="reportStatisticsChart" class="h-56" ref="reportStatisticsChart"></div>
                            <div class="mt-4">
                                <h4 class="text-sm font-semibold text-gray-700 mb-2">报告分类统计</h4>
                                <div class="space-y-2">
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">常规巡查报告</span>
                                        <span class="font-medium text-gray-900">{{ reportTypeStatistics['常规巡查报告'] }} 份</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">专项巡查报告</span>
                                        <span class="font-medium text-gray-900">{{ reportTypeStatistics['专项巡查报告'] }} 份</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">应急巡查报告</span>
                                        <span class="font-medium text-gray-900">{{ reportTypeStatistics['应急巡查报告'] }} 份</span>
                                    </div>
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-gray-600">问题整改报告</span>
                                        <span class="font-medium text-gray-900">{{ reportTypeStatistics['问题整改报告'] }} 份</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-2">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-sm font-semibold text-gray-700">巡查报告封面</h4>
                                    <button @click="viewMoreReportCovers"
                                        class="text-xs text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer">查看更多</button>
                                </div>
                                <div class="mt-2 relative rounded-md overflow-hidden shadow-sm">
                                    <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                        alt="巡查报告封面" class="w-full h-56 object-cover object-top">
                                    <div
                                        class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                        <div class="text-white text-sm font-medium">2025年第二季度钢铁企业安全生产专项巡查报告</div>
                                        <div class="text-white text-xs opacity-80">生成日期: 2025-07-05</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 巡查统计分析 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="font-bold text-lg text-gray-800">巡查统计分析</h2>
                        <div class="flex space-x-3">
                            <button
                                @click="exportStatisticsData"
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-download mr-2"></i> 导出数据
                            </button>
                            <button
                                @click="generateAnalysisReport"
                                class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                                <i class="fas fa-chart-line mr-2"></i> 生成分析报告
                            </button>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-6">
                        <!-- 巡查任务完成情况 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">巡查任务完成情况</h3>
                            <div id="taskCompletionChart" class="h-64" ref="taskCompletionChart"></div>
                        </div>
                        <!-- 巡查问题类型分布 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">巡查问题类型分布</h3>
                            <div id="issueTypeChart" class="h-64" ref="issueTypeChart"></div>
                        </div>
                        <!-- 巡查问题整改率 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">巡查问题整改率</h3>
                            <div id="issueFixRateChart" class="h-64" ref="issueFixRateChart"></div>
                        </div>
                        <!-- 巡查企业分布 -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h3 class="font-bold text-base text-gray-800 mb-3">巡查企业分布</h3>
                            <div id="companyDistributionChart" class="h-64" ref="companyDistributionChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!-- 新建巡查任务弹窗 -->
              <div v-if="showNewTaskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg shadow-xl w-1/2 max-h-3/4 overflow-y-auto">
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-bold text-lg text-gray-800">新建巡查任务</h3>
                        <button
                            class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
                            @click="closeNewTaskModal">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
                            <input type="text" v-model="newTaskForm.name" placeholder="请输入任务名称"
                                class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="relative">
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查类型</label>
                            <div class="relative">
                                <button
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                    @click="toggleDropdown('type')">
                                    <span>{{ newTaskForm.type || '请选择巡查类型' }}</span>
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </button>
                                <!-- 巡查类型下拉菜单 -->
                                <div v-if="dropdownOpen.type"
                                    class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                                    <div v-for="type in inspectionTypes" :key="type"
                                        class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                        @click="selectType(type)">
                                        {{ type }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="relative">
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查企业</label>
                            <div class="relative">
                                <button
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                    @click="toggleDropdown('company')">
                                    <span>{{ newTaskForm.company || '请选择巡查企业' }}</span>
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </button>
                                <!-- 巡查企业下拉菜单 -->
                                <div v-if="dropdownOpen.company"
                                    class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1 max-h-60 overflow-y-auto">
                                    <div v-for="company in companyList" :key="company"
                                        class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                        @click="selectCompany(company)">
                                        {{ company }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="relative">
                            <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                            <div class="relative">
                                <button
                                    class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                    @click="toggleDropdown('owner')">
                                    <span>{{ newTaskForm.owner || '请选择负责人' }}</span>
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </button>
                                <!-- 负责人下拉菜单 -->
                                <div v-if="dropdownOpen.owner"
                                    class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                                    <div v-for="owner in ownerList" :key="owner"
                                        class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                        @click="selectOwner(owner)">
                                        {{ owner }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">计划开始时间</label>
                            <div class="relative">
                                <input type="date" v-model="newTaskForm.startDate" placeholder="请选择开始时间"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i
                                    class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">计划结束时间</label>
                            <div class="relative">
                                <input type="date" v-model="newTaskForm.endDate" placeholder="请选择结束时间"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <i
                                    class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查内容</label>
                            <div class="relative">
                                <textarea v-model="newTaskForm.content" placeholder="请输入巡查内容..." rows="4"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">巡查要求</label>
                            <div class="relative">
                                <textarea v-model="newTaskForm.requirements" placeholder="请输入巡查要求..." rows="3"
                                    class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">附件上传</label>
                            <div class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
                                <p class="text-sm text-gray-500">点击或拖拽文件到此处上传</p>
                                <p class="text-xs text-gray-400 mt-1">支持 PDF、Word、Excel、JPG、PNG 格式文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                            @click="closeNewTaskModal">
                            取消
                        </button>
                        <button @click="saveNewTask"
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer">
                            <i class="fas fa-save mr-2"></i> 保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 制定巡查计划弹窗 -->
     <div v-if="showNewPlanModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-1/2 max-h-3/4 overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-lg text-gray-800">制定巡查计划</h3>
                    <button class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showNewPlanModal = false">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">计划名称</label>
                        <input type="text" v-model="newPlanForm.name" placeholder="请输入计划名称"
                            class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="relative">
                        <label class="block text-sm font-medium text-gray-700 mb-1">计划类型</label>
                        <div class="relative">
                            <button
                                class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                @click="togglePlanDropdown('type')">
                                <span>{{ newPlanForm.type || '请选择计划类型' }}</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <!-- 计划类型下拉菜单 -->
                            <div v-if="planDropdownOpen.type" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                                <div 
                                    v-for="type in planTypes" 
                                    :key="type" 
                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                    @click="selectPlanType(type)">
                                    {{ type }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <label class="block text-sm font-medium text-gray-700 mb-1">计划周期</label>
                        <div class="relative">
                            <button
                                class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                @click="togglePlanDropdown('period')">
                                <span>{{ newPlanForm.period || '请选择计划周期' }}</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <!-- 计划周期下拉菜单 -->
                            <div v-if="planDropdownOpen.period" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                                <div 
                                    v-for="period in planPeriods" 
                                    :key="period" 
                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                    @click="selectPlanPeriod(period)">
                                    {{ period }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <label class="block text-sm font-medium text-gray-700 mb-1">负责部门</label>
                        <div class="relative">
                            <button
                                class="w-full flex items-center justify-between bg-gray-100 text-gray-700 px-3 py-2 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                                @click="togglePlanDropdown('department')">
                                <span>{{ newPlanForm.department || '请选择负责部门' }}</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <!-- 负责部门下拉菜单 -->
                            <div v-if="planDropdownOpen.department" class="absolute z-10 mt-1 w-full bg-white shadow-lg rounded-md py-1">
                                <div 
                                    v-for="dept in departments" 
                                    :key="dept" 
                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
                                    @click="selectDepartment(dept)">
                                    {{ dept }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <div class="relative">
                            <input type="date" v-model="newPlanForm.startDate"
                                class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <i
                                class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                        <div class="relative">
                            <input type="date" v-model="newPlanForm.endDate"
                                class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <i
                                class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                     <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">巡查企业</label>
                        <div class="bg-gray-100 rounded p-3 max-h-40 overflow-y-auto">
                            <div class="flex flex-wrap gap-2">
                                <div v-for="(company, index) in newPlanForm.companies" :key="index"
                                    class="bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-xs flex items-center">
                                    {{ company }}
                                    <i class="fas fa-times-circle ml-1 cursor-pointer" @click="removeCompanyFromPlan(index)"></i>
                                </div>
                                <div
                                    class="bg-gray-200 text-gray-600 rounded-full px-3 py-1 text-xs flex items-center cursor-pointer"
                                    @click="showCompanySelector = true">
                                    <i class="fas fa-plus mr-1"></i> 添加企业
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">巡查内容</label>
                        <div class="relative">
                            <textarea placeholder="请输入巡查内容..." rows="4"
                                class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">备注说明</label>
                        <div class="relative">
                            <textarea placeholder="请输入备注说明..." rows="2"
                                class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                        <button
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                            @click="closeNewPlanModal">
                            取消
                        </button>
                        <button
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                            @click="saveNewPlan">
                            <i class="fas fa-save mr-2"></i> 保存
                        </button>
                    </div>
            </div>
        </div>
    </div>
     <!-- 企业选择弹窗 -->
    <div v-if="showCompanySelector" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-1/3">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-lg text-gray-800">选择企业</h3>
                    <button
                        class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showCompanySelector = false">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <div class="max-h-80 overflow-y-auto">
                    <div 
                        v-for="(company, index) in companyList" 
                        :key="index"
                        class="flex items-center px-4 py-2 hover:bg-gray-100 cursor-pointer"
                        @click="toggleCompanySelection(company)">
                        <input 
                            type="checkbox" 
                            :checked="newPlanForm.companies.includes(company)"
                            class="mr-3 h-4 w-4 text-blue-600 rounded">
                        <span>{{ company }}</span>
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3 mt-6">
                    <button
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showCompanySelector = false">
                        取消
                    </button>
                    <button
                        class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showCompanySelector = false">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- 筛选弹窗 -->
    <div v-if="showFilterModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-1/3">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-lg text-gray-800">筛选条件</h3>
                    <button class="text-gray-500 hover:text-gray-700 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showFilterModal = false">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">巡查类型</label>
                        <select v-model="filterCriteria.type"
                            class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">全部类型</option>
                            <option value="常规巡查">常规巡查</option>
                            <option value="专项巡查">专项巡查</option>
                            <option value="复查">复查</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">负责人</label>
                        <input type="text" v-model="filterCriteria.owner" placeholder="请输入负责人姓名"
                            class="w-full bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">计划时间</label>
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" v-model="filterCriteria.startDate"
                                class="bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <input type="date" v-model="filterCriteria.endDate"
                                class="bg-gray-100 border-none rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end space-x-3 mt-6">
                    <button
                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                        @click="clearFilter">
                        清除筛选
                    </button>
                    <button
                        class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button whitespace-nowrap cursor-pointer"
                        @click="applyFilter">
                        <i class="fas fa-filter mr-2"></i> 应用筛选
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 报告模板管理弹窗 -->
    <div v-if="showReportTemplateModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" @click="closeReportTemplateModal">
        <div class="bg-white rounded-lg shadow-xl w-4/5 max-w-4xl max-h-[90vh] overflow-hidden" @click.stop>
            <!-- 弹窗头部 -->
            <div class="flex justify-between items-center p-6 border-b">
                <h3 class="text-xl font-bold text-gray-800">报告模板管理</h3>
                <button @click="closeReportTemplateModal" 
                        class="w-8 h-8 flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors">
                    <span class="text-xl font-bold">×</span>
                </button>
            </div>
            
            <!-- 弹窗内容 -->
            <div class="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
                <!-- 操作按钮 -->
                <div class="flex justify-between items-center mb-6">
                    <h4 class="text-lg font-semibold text-gray-700">模板列表</h4>
                    <button @click="showNewTemplateForm" 
                            class="px-4 py-2 bg-blue-600 text-white rounded flex items-center !rounded-button">
                        <i class="fas fa-plus mr-2"></i> 新建模板
                    </button>
                </div>
                
                <!-- 模板列表 -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模板名称</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">适用类型</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr v-for="template in reportTemplates" :key="template.id" class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ template.name }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ template.type }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ template.createTime }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span :class="template.status === '启用' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" 
                                          class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
                                        {{ template.status }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                                    <button @click="editTemplate(template)" 
                                            class="text-blue-600 hover:text-blue-900">编辑</button>
                                    <button @click="toggleTemplateStatus(template)" 
                                            class="text-yellow-600 hover:text-yellow-900">
                                        {{ template.status === '启用' ? '停用' : '启用' }}
                                    </button>
                                    <button @click="deleteTemplate(template.id)" 
                                            class="text-red-600 hover:text-red-900">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 新建/编辑模板表单 -->
                <div v-if="showTemplateForm" class="mt-8 border-t pt-6">
                    <h5 class="text-lg font-semibold text-gray-700 mb-4">
                        {{ editingTemplate ? '编辑模板' : '新建模板' }}
                    </h5>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">模板名称</label>
                            <input v-model="newTemplate.name" type="text" 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="请输入模板名称">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">适用类型</label>
                            <select v-model="newTemplate.type" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">请选择类型</option>
                                <option value="常规巡查">常规巡查</option>
                                <option value="专项巡查">专项巡查</option>
                                <option value="复查">复查</option>
                                <option value="应急巡查">应急巡查</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">模板内容</label>
                        <textarea v-model="newTemplate.content" rows="6" 
                                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  placeholder="请输入模板内容..."></textarea>
                    </div>
                    <div class="flex justify-end space-x-3">
                        <button @click="showTemplateForm = false" 
                                class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button">
                            取消
                        </button>
                        <button @click="saveTemplate" 
                                class="px-4 py-2 bg-blue-600 text-white rounded !rounded-button">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看报告详情弹窗 -->
    <div v-if="showViewReportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
         @click="closeViewReportModal">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"
             @click.stop>
            <div class="flex justify-between items-center p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">报告详情</h3>
                <button @click="closeViewReportModal" 
                        class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200">
                    <span class="text-gray-500 text-xl leading-none">×</span>
                </button>
            </div>
            
            <div class="p-6">
                <!-- 报告基本信息 -->
                <div class="grid grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">报告名称</label>
                        <div class="text-gray-900 font-medium">{{ selectedReport.name }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">报告编号</label>
                        <div class="text-gray-900">{{ selectedReport.id }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">报告类型</label>
                        <div class="text-gray-900">{{ selectedReport.type }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">涉及企业</label>
                        <div class="text-gray-900">{{ selectedReport.company }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">生成时间</label>
                        <div class="text-gray-900">{{ selectedReport.date }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">创建人</label>
                        <div class="text-gray-900">{{ selectedReport.creator }}</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
                              :class="selectedReport.statusClass">
                            {{ selectedReport.status }}
                        </span>
                    </div>
                </div>

                <!-- 报告内容 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">报告内容</label>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-medium text-gray-900 mb-2">一、巡查概况</h4>
                                <p class="text-gray-700 text-sm leading-relaxed">
                                    本次巡查针对{{ selectedReport.company }}进行{{ selectedReport.type }}，
                                    巡查时间为{{ selectedReport.date }}，巡查人员为{{ selectedReport.creator }}。
                                    本次巡查重点关注安全生产、环保达标、设备运行等关键领域。
                                </p>
                            </div>
                            
                            <div>
                                <h4 class="font-medium text-gray-900 mb-2">二、巡查发现</h4>
                                <div class="text-gray-700 text-sm leading-relaxed">
                                    <p class="mb-2">通过现场检查和资料审核，发现以下情况：</p>
                                    <ul class="list-disc list-inside space-y-1 ml-4">
                                        <li>安全生产制度执行情况良好，现场安全防护措施到位</li>
                                        <li>环保设施运行正常，污染物排放符合标准要求</li>
                                        <li>设备维护保养记录完整，关键设备运行状态良好</li>
                                        <li>发现部分区域标识不够清晰，需要进一步完善</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="font-medium text-gray-900 mb-2">三、整改建议</h4>
                                <div class="text-gray-700 text-sm leading-relaxed">
                                    <p class="mb-2">针对发现的问题，提出以下整改建议：</p>
                                    <ul class="list-disc list-inside space-y-1 ml-4">
                                        <li>完善现场安全标识，确保标识清晰可见</li>
                                        <li>加强员工安全培训，提高安全意识</li>
                                        <li>建立定期检查机制，确保问题及时发现和处理</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="font-medium text-gray-900 mb-2">四、总体评价</h4>
                                <p class="text-gray-700 text-sm leading-relaxed">
                                    {{ selectedReport.company }}在安全生产管理方面总体表现良好，
                                    各项制度执行到位，现场管理规范。建议继续保持现有管理水平，
                                    并针对发现的问题及时整改，进一步提升安全管理水平。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-end space-x-3">
                    <button @click="downloadReport(selectedReport)" 
                            class="px-4 py-2 bg-green-600 text-white rounded !rounded-button hover:bg-green-700">
                        下载报告
                    </button>
                    <button @click="closeViewReportModal" 
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button hover:bg-gray-200">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 报告封面查看模态框 -->
    <div v-if="showReportCoverModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
         @click="closeReportCoverModal">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"
             @click.stop>
            <div class="p-6">
                <!-- 模态框头部 -->
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold text-gray-900">巡查报告封面展示</h3>
                    <button @click="closeReportCoverModal" class="text-gray-500 hover:text-gray-700">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <!-- 报告封面网格展示 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 报告封面1 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面1" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">2025年第二季度钢铁企业安全生产专项巡查报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-07-05</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：专项巡查报告</div>
                            <div class="text-sm text-gray-600">涉及企业：华东钢铁集团</div>
                        </div>
                    </div>

                    <!-- 报告封面2 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面2" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">环保合规性专项检查报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-06-28</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：环保专项报告</div>
                            <div class="text-sm text-gray-600">涉及企业：绿色化工有限公司</div>
                        </div>
                    </div>

                    <!-- 报告封面3 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面3" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">设备维护保养专项检查报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-06-20</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：设备检查报告</div>
                            <div class="text-sm text-gray-600">涉及企业：重工机械制造厂</div>
                        </div>
                    </div>

                    <!-- 报告封面4 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面4" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">应急响应能力评估报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-06-15</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：应急巡查报告</div>
                            <div class="text-sm text-gray-600">涉及企业：石化工业园区</div>
                        </div>
                    </div>

                    <!-- 报告封面5 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面5" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">质量管理体系审核报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-06-10</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：质量审核报告</div>
                            <div class="text-sm text-gray-600">涉及企业：精密制造有限公司</div>
                        </div>
                    </div>

                    <!-- 报告封面6 -->
                    <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="relative">
                            <img src="https://readdy.ai/api/search-image?query=A%20professional%20inspection%20report%20cover%20page%20for%20steel%20industry%20safety%20inspection%20with%20blue%20theme%20design%2C%20featuring%20a%20modern%20layout%20with%20company%20logo%2C%20inspection%20title%2C%20date%20information%2C%20and%20official%20stamp.%20The%20design%20is%20clean%20and%20corporate%20with%20subtle%20steel%20industry%20elements%20in%20the%20background&width=300&height=400&seq=1&orientation=portrait"
                                 alt="巡查报告封面6" class="w-full h-64 object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                                <div class="text-white text-sm font-medium">常规安全生产巡查报告</div>
                                <div class="text-white text-xs opacity-80">生成日期: 2025-06-05</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="text-sm text-gray-600">报告类型：常规巡查报告</div>
                            <div class="text-sm text-gray-600">涉及企业：新能源科技公司</div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-end mt-6">
                    <button @click="closeReportCoverModal" 
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded !rounded-button hover:bg-gray-200">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import * as echarts from 'echarts';
import { ElMessageBox, ElMessage } from 'element-plus';
import Header from '../components/Header.vue';
export default {
    components: {
    Header,
  },
    data() {
        return {
            editingPlanIndex: -1,
            taskSearchQuery: '', // 添加搜索查询字段
            currentPage: 1, // 当前页码
            pageSize: 10, // 每页显示条数
            showFilterModal: false, // 控制筛选弹窗显示
            filterCriteria: { // 筛选条件
                type: '',
                owner: '',
                startDate: '',
                endDate: ''
            },
            // 新建任务表单数据
            newTaskForm: {
                name: '',
                type: '',
                company: '',
                owner: '',
                startDate: '',
                endDate: '',
                content: '',
                requirements: ''
            },
            // 下拉菜单状态
            dropdownOpen: {
                type: false,
                company: false,
                owner: false
            },
                        newPlanForm: {
                name: '',
                type: '',
                period: '',
                department: '',
                startDate: '',
                endDate: '',
                companies: [],
                content: '',
                remarks: ''
            },
            // 计划下拉菜单状态
            planDropdownOpen: {
                type: false,
                period: false,
                department: false
            },
            // 计划类型列表
            planTypes: ['年度计划', '季度计划', '月度计划', '专项计划'],
            // 计划周期列表
            planPeriods: ['2025年第一季度', '2025年第二季度', '2025年第三季度', '2025年第四季度'],
            // 负责部门列表
            departments: ['安全生产监督部', '设备管理部', '环保监测部', '特种设备监察部'],
            // 企业选择弹窗显示状态
            showCompanySelector: false,
            // 巡查类型列表
            inspectionTypes: ['常规巡查', '专项巡查', '复查', '应急巡查'],
            // 企业列表
            companyList: [
                '河北钢铁集团有限公司',
                '山东泰山钢铁有限公司',
                '江苏沿海钢铁集团',
                '湖北武钢有限责任公司',
                '辽宁鞍钢集团有限公司',
                '河南安阳钢铁厂',
                '重庆钢铁股份有限公司',
                '云南昆钢钢铁集团',
                '广东韶钢松山股份有限公司',
                '福建三钢闽光股份有限公司'
            ],
            // 负责人列表
            ownerList: ['张工', '李工', '王工', '刘工', '赵工', '钱工', '孙工', '周工', '吴工', '郑工'],

            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        // { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: true, link: '/patrol' },
                        { name: '检索功能', active: false, link: 'search' },
                        { name: '一屏汇聚展示', active: false, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            taskTabs: [
                { name: '待处理', count: 24, active: true },
                { name: '进行中', count: 2, active: false },
                { name: '已完成', count: 156, active: false },
                { name: '已取消', count: 0, active: false }
            ],
            inspectionTasks: [
                {
                    name: '河北钢铁集团安全生产巡查',
                    code: 'XC-2025-0708-001',
                    company: '河北钢铁集团有限公司',
                    type: '常规巡查',
                    owner: '张工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '山东泰山钢铁设备安全专项检查',
                    code: 'XC-2025-0708-002',
                    company: '山东泰山钢铁有限公司',
                    type: '专项巡查',
                    owner: '李工',
                    scheduledDate: '2025-07-11',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '湖北武钢安全隐患整改复查',
                    code: 'XC-2025-0706-004',
                    company: '湖北武钢有限责任公司',
                    type: '复查',
                    owner: '刘工',
                    scheduledDate: '2025-07-08',
                    status: '进行中',
                    statusType: 'inProgress',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '辽宁鞍钢高炉安全巡查',
                    code: 'XC-2025-0705-005',
                    company: '辽宁鞍钢集团有限公司',
                    type: '常规巡查',
                    owner: '赵工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '河南安阳钢铁厂停产整顿检查',
                    code: 'XC-2025-0704-006',
                    company: '河南安阳钢铁厂',
                    type: '专项巡查',
                    owner: '钱工',
                    scheduledDate: '2025-07-09',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '重庆钢铁环保设施运行检查',
                    code: 'XC-2025-0703-007',
                    company: '重庆钢铁股份有限公司',
                    type: '专项巡查',
                    owner: '孙工',
                    scheduledDate: '2025-07-15',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '云南昆钢安全生产巡查',
                    code: 'XC-2025-0702-008',
                    company: '云南昆钢钢铁集团',
                    type: '常规巡查',
                    owner: '周工',
                    scheduledDate: '2025-07-16',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '广东韶钢松山特种设备检查',
                    code: 'XC-2025-0701-009',
                    company: '广东韶钢松山股份有限公司',
                    type: '专项巡查',
                    owner: '吴工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '福建三钢闽光停产整顿检查',
                    code: 'XC-2025-0630-010',
                    company: '福建三钢闽光股份有限公司',
                    type: '专项巡查',
                    owner: '郑工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '河北钢铁集团安全生产巡查',
                    code: 'XC-2025-0708-001',
                    company: '河北钢铁集团有限公司',
                    type: '常规巡查',
                    owner: '张工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '山东泰山钢铁设备安全专项检查',
                    code: 'XC-2025-0708-002',
                    company: '山东泰山钢铁有限公司',
                    type: '专项巡查',
                    owner: '李工',
                    scheduledDate: '2025-07-11',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '江苏沿海钢铁环保达标检查',
                    code: 'XC-2025-0707-003',
                    company: '江苏沿海钢铁集团',
                    type: '专项巡查',
                    owner: '王工',
                    scheduledDate: '2025-07-09',
                    status: '进行中',
                    statusType: 'inProgress',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '辽宁鞍钢高炉安全巡查',
                    code: 'XC-2025-0705-005',
                    company: '辽宁鞍钢集团有限公司',
                    type: '常规巡查',
                    owner: '赵工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '河南安阳钢铁厂停产整顿检查',
                    code: 'XC-2025-0704-006',
                    company: '河南安阳钢铁厂',
                    type: '专项巡查',
                    owner: '钱工',
                    scheduledDate: '2025-07-09',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '重庆钢铁环保设施运行检查',
                    code: 'XC-2025-0703-007',
                    company: '重庆钢铁股份有限公司',
                    type: '专项巡查',
                    owner: '孙工',
                    scheduledDate: '2025-07-15',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '云南昆钢安全生产巡查',
                    code: 'XC-2025-0702-008',
                    company: '云南昆钢钢铁集团',
                    type: '常规巡查',
                    owner: '周工',
                    scheduledDate: '2025-07-16',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '广东韶钢松山特种设备检查',
                    code: 'XC-2025-0701-009',
                    company: '广东韶钢松山股份有限公司',
                    type: '专项巡查',
                    owner: '吴工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '福建三钢闽光停产整顿检查',
                    code: 'XC-2025-0630-010',
                    company: '福建三钢闽光股份有限公司',
                    type: '专项巡查',
                    owner: '郑工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '河北钢铁集团安全生产巡查',
                    code: 'XC-2025-0708-001',
                    company: '河北钢铁集团有限公司',
                    type: '常规巡查',
                    owner: '张工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '山东泰山钢铁设备安全专项检查',
                    code: 'XC-2025-0708-002',
                    company: '山东泰山钢铁有限公司',
                    type: '专项巡查',
                    owner: '李工',
                    scheduledDate: '2025-07-11',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '辽宁鞍钢高炉安全巡查',
                    code: 'XC-2025-0705-005',
                    company: '辽宁鞍钢集团有限公司',
                    type: '常规巡查',
                    owner: '赵工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '河南安阳钢铁厂停产整顿检查',
                    code: 'XC-2025-0704-006',
                    company: '河南安阳钢铁厂',
                    type: '专项巡查',
                    owner: '钱工',
                    scheduledDate: '2025-07-09',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '重庆钢铁环保设施运行检查',
                    code: 'XC-2025-0703-007',
                    company: '重庆钢铁股份有限公司',
                    type: '专项巡查',
                    owner: '孙工',
                    scheduledDate: '2025-07-15',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '云南昆钢安全生产巡查',
                    code: 'XC-2025-0702-008',
                    company: '云南昆钢钢铁集团',
                    type: '常规巡查',
                    owner: '周工',
                    scheduledDate: '2025-07-16',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '广东韶钢松山特种设备检查',
                    code: 'XC-2025-0701-009',
                    company: '广东韶钢松山股份有限公司',
                    type: '专项巡查',
                    owner: '吴工',
                    scheduledDate: '2025-07-12',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '福建三钢闽光停产整顿检查',
                    code: 'XC-2025-0630-010',
                    company: '福建三钢闽光股份有限公司',
                    type: '专项巡查',
                    owner: '郑工',
                    scheduledDate: '2025-07-10',
                    status: '待处理',
                    statusType: 'pending',
                    statusClass: 'bg-blue-100 text-blue-800'
                }
            ],
            // 日历年月（动态）
            calendarYear: new Date().getFullYear(),
            calendarMonth: new Date().getMonth() + 1,
            // 选中日期（YYYY-MM-DD）
            selectedDateKey: '',
            calendarDates: [],
            todayTasks: [
                {
                    name: '湖北武钢安全隐患整改复查',
                    company: '湖北武钢有限责任公司',
                    time: '09:30-11:30',
                    statusType: 'inProgress'
                },
                {
                    name: '紧急安全隐患排查',
                    company: '河北钢铁集团有限公司',
                    time: '14:00-16:00',
                    statusType: 'pending'
                }
            ],
            inspectionPlans: [
                {
                    name: '2025年第三季度钢铁企业安全生产巡查计划',
                    code: 'JH-2025-Q3-001',
                    period: '2025-07-01 至 2025-09-30',
                    companyCount: 28,
                    content: '安全生产、环保达标',
                    department: '安全生产监督部',
                    status: '执行中',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '高炉设备安全专项检查计划',
                    code: 'JH-2025-ZX-002',
                    period: '2025-07-15 至 2025-08-15',
                    companyCount: 15,
                    content: '高炉设备安全',
                    department: '设备管理部',
                    status: '未开始',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '环保设施运行情况巡查计划',
                    code: 'JH-2025-HB-003',
                    period: '2025-07-10 至 2025-07-30',
                    companyCount: 20,
                    content: '环保设施运行',
                    department: '环保监测部',
                    status: '未开始',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '特种设备安全检查计划',
                    code: 'JH-2025-TZ-004',
                    period: '2025-08-01 至 2025-08-31',
                    companyCount: 25,
                    content: '特种设备安全',
                    department: '特种设备监察部',
                    status: '未开始',
                    statusClass: 'bg-blue-100 text-blue-800'
                },
                {
                    name: '2025年上半年安全生产巡查计划',
                    code: 'JH-2025-H1-005',
                    period: '2025-01-01 至 2025-06-30',
                    companyCount: 30,
                    content: '安全生产全面检查',
                    department: '安全生产监督部',
                    status: '已完成',
                    statusClass: 'bg-gray-100 text-gray-800'
                }
            ],
            inspectionRecords: [
                {
                    id: 'JL-2025-0705-001',
                    company: '河北钢铁集团有限公司',
                    type: '常规巡查',
                    inspector: '张工、王工',
                    date: '2025-09-05',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 2
                },
                {
                    id: 'JL-2025-0704-002',
                    company: '山东泰山钢铁有限公司',
                    type: '专项巡查',
                    inspector: '李工、赵工',
                    date: '2025-10-04',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 3
                },
                {
                    id: 'JL-2025-0703-003',
                    company: '江苏沿海钢铁集团',
                    type: '常规巡查',
                    inspector: '王工、钱工',
                    date: '2025-10-10',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 1
                },
                {
                    id: 'JL-2025-0702-004',
                    company: '辽宁鞍钢集团有限公司',
                    type: '常规巡查',
                    inspector: '赵工、孙工',
                    date: '2025-09-02',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 0
                },
                {
                    id: 'JL-2025-0701-005',
                    company: '云南昆钢钢铁集团',
                    type: '专项巡查',
                    inspector: '周工、吴工',
                    date: '2025-07-01',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 2
                },
                {
                    id: 'JL-2025-0630-006',
                    company: '广东韶钢松山股份有限公司',
                    type: '常规巡查',
                    inspector: '吴工、郑工',
                    date: '2025-06-30',
                    result: '合格',
                    resultClass: 'bg-green-100 text-green-800',
                    issueCount: 1
                },
                {
                    id: 'JL-2025-0629-007',
                    company: '湖北武钢有限责任公司',
                    type: '专项巡查',
                    inspector: '刘工、张工',
                    date: '2025-06-29',
                    result: '不合格',
                    resultClass: 'bg-red-100 text-red-800',
                    issueCount: 8
                },
                {
                    id: 'JL-2025-0628-008',
                    company: '重庆钢铁股份有限公司',
                    type: '专项巡查',
                    inspector: '孙工、李工',
                    date: '2025-06-28',
                    result: '整改中',
                    resultClass: 'bg-yellow-100 text-yellow-800',
                    issueCount: 5
                },
                {
                    id: 'JL-2025-0627-009',
                    company: '河南安阳钢铁厂',
                    type: '专项巡查',
                    inspector: '钱工、王工',
                    date: '2025-06-27',
                    result: '不合格',
                    resultClass: 'bg-red-100 text-red-800',
                    issueCount: 12
                },
                {
                    id: 'JL-2025-0626-010',
                    company: '福建三钢闽光股份有限公司',
                    type: '常规巡查',
                    inspector: '郑工、赵工',
                    date: '2025-06-26',
                    result: '整改中',
                    resultClass: 'bg-yellow-100 text-yellow-800',
                    issueCount: 6
                }
            ],
            inspectionReports: [
                {
                    name: '河北钢铁集团安全生产巡查报告',
                    id: 'BG-2025-0705-001',
                    type: '常规巡查报告',
                    company: '河北钢铁集团有限公司',
                    date: '2025-07-05',
                    creator: '张工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '山东泰山钢铁专项巡查报告',
                    id: 'BG-2025-0704-002',
                    type: '专项巡查报告',
                    company: '山东泰山钢铁有限公司',
                    date: '2025-07-04',
                    creator: '李工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '江苏沿海钢铁环保达标检查报告',
                    id: 'BG-2025-0703-003',
                    type: '专项巡查报告',
                    company: '江苏沿海钢铁集团',
                    date: '2025-07-03',
                    creator: '王工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '辽宁鞍钢安全生产巡查报告',
                    id: 'BG-2025-0702-004',
                    type: '常规巡查报告',
                    company: '辽宁鞍钢集团有限公司',
                    date: '2025-07-02',
                    creator: '赵工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '云南昆钢特种设备检查报告',
                    id: 'BG-2025-0701-005',
                    type: '专项巡查报告',
                    company: '云南昆钢钢铁集团',
                    date: '2025-07-01',
                    creator: '周工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '广东韶钢松山安全生产巡查报告',
                    id: 'BG-2025-0630-006',
                    type: '常规巡查报告',
                    company: '广东韶钢松山股份有限公司',
                    date: '2025-06-30',
                    creator: '吴工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '湖北武钢安全隐患整改报告',
                    id: 'BG-2025-0629-007',
                    type: '整改报告',
                    company: '湖北武钢有限责任公司',
                    date: '2025-06-29',
                    creator: '刘工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '重庆钢铁环保设施运行检查报告',
                    id: 'BG-2025-0628-008',
                    type: '专项巡查报告',
                    company: '重庆钢铁股份有限公司',
                    date: '2025-06-28',
                    creator: '孙工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '河南安阳钢铁厂停产整顿报告',
                    id: 'BG-2025-0627-009',
                    type: '整改报告',
                    company: '河南安阳钢铁厂',
                    date: '2025-06-27',
                    creator: '钱工',
                    status: '已驳回',
                    statusClass: 'bg-red-100 text-red-800'
                },
                {
                    name: '福建三钢闽光安全隐患整改报告',
                    id: 'BG-2025-0626-010',
                    type: '整改报告',
                    company: '福建三钢闽光股份有限公司',
                    date: '2025-06-26',
                    creator: '郑工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '河南安阳钢铁厂停产整顿报告',
                    id: 'BG-2025-0627-009',
                    type: '整改报告',
                    company: '河南安阳钢铁厂',
                    date: '2025-06-27',
                    creator: '钱工',
                    status: '已驳回',
                    statusClass: 'bg-red-100 text-red-800'
                },
                {
                    name: '福建三钢闽光安全隐患整改报告',
                    id: 'BG-2025-0626-010',
                    type: '整改报告',
                    company: '福建三钢闽光股份有限公司',
                    date: '2025-06-26',
                    creator: '郑工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '云南昆钢特种设备检查报告',
                    id: 'BG-2025-0701-005',
                    type: '专项巡查报告',
                    company: '云南昆钢钢铁集团',
                    date: '2025-07-01',
                    creator: '周工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '广东韶钢松山安全生产巡查报告',
                    id: 'BG-2025-0630-006',
                    type: '常规巡查报告',
                    company: '广东韶钢松山股份有限公司',
                    date: '2025-06-30',
                    creator: '吴工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '湖北武钢安全隐患整改报告',
                    id: 'BG-2025-0629-007',
                    type: '整改报告',
                    company: '湖北武钢有限责任公司',
                    date: '2025-06-29',
                    creator: '刘工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                {
                    name: '重庆钢铁环保设施运行检查报告',
                    id: 'BG-2025-0628-008',
                    type: '专项巡查报告',
                    company: '重庆钢铁股份有限公司',
                    date: '2025-06-28',
                    creator: '孙工',
                    status: '待审核',
                    statusClass: 'bg-yellow-100 text-yellow-800'
                },
                                 {
                    name: '河北钢铁集团安全生产巡查报告',
                    id: 'BG-2025-0705-001',
                    type: '常规巡查报告',
                    company: '河北钢铁集团有限公司',
                    date: '2025-07-05',
                    creator: '张工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '山东泰山钢铁专项巡查报告',
                    id: 'BG-2025-0704-002',
                    type: '专项巡查报告',
                    company: '山东泰山钢铁有限公司',
                    date: '2025-07-04',
                    creator: '李工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '江苏沿海钢铁环保达标检查报告',
                    id: 'BG-2025-0703-003',
                    type: '专项巡查报告',
                    company: '江苏沿海钢铁集团',
                    date: '2025-07-03',
                    creator: '王工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
                {
                    name: '辽宁鞍钢安全生产巡查报告',
                    id: 'BG-2025-0702-004',
                    type: '常规巡查报告',
                    company: '辽宁鞍钢集团有限公司',
                    date: '2025-07-02',
                    creator: '赵工',
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                },
            ],
            selectedCompanies: [
                '河北钢铁集团有限公司',
                '山东泰山钢铁有限公司',
                '江苏沿海钢铁集团',
                '湖北武钢有限责任公司',
                '辽宁鞍钢集团有限公司'
            ],
            showNewTaskModal: false,
                showNewPlanModal: false,
                showDetailModal: false,
                selectedPlan: {},
                showRecordDetailModal: false,
                selectedRecord: {},
                showAdvancedSearchPanel: false,
            // 巡查记录分页相关
            recordCurrentPage: 1,
            recordPageSize: 5,
            recordSearchQuery: '',
            recordFilterCriteria: {
                company: '',
                type: '',
                result: '',
                inspector: '',
                timeRange: '近 180 天',
                recordId: ''  // 记录编号搜索
            },
            // 排序选项
            sortOptions: [
                { value: 'date_desc', label: '按日期降序' },
                { value: 'date_asc', label: '按日期升序' },
                { value: 'company_asc', label: '按企业名称升序' },
                { value: 'company_desc', label: '按企业名称降序' }
            ],
            currentSortOption: 'date_desc',
            // 时间范围选择器相关数据
            showTimeRangeDropdown: false,
            timeRangeOptions: [
                '近 7 天',
                '近 30 天',
                '近 90 天',
                '近 180 天',
                '近 1 年'
            ],
            // 巡查报告管理分页相关
            reportCurrentPage: 1,
            reportPageSize: 10,
            // 报告模板管理相关数据
            showReportTemplateModal: false,
            // 查看报告弹窗相关数据
            showViewReportModal: false,
            selectedReport: {},
            // 报告封面查看相关数据
            showReportCoverModal: false,
            reportTemplates: [
                { id: 1, name: '标准巡查报告模板', type: '常规巡查', createTime: '2024-01-15', status: '启用' },
                { id: 2, name: '专项检查报告模板', type: '专项巡查', createTime: '2024-01-10', status: '启用' },
                { id: 3, name: '复查报告模板', type: '复查', createTime: '2024-01-08', status: '停用' }
            ],
            newTemplate: {
                name: '',
                type: '',
                content: ''
            },
            editingTemplate: null,
            showTemplateForm: false
        };
    },
    computed: {
        filteredTasks() {
            // 根据当前选中的tab过滤任务
            let filtered = this.inspectionTasks;
            // 根据当前选中的tab过滤任务
            const activeTab = this.taskTabs.find(tab => tab.active);
            if (activeTab.name === '待处理') {
                filtered = filtered.filter(task => task.statusType === 'pending');
            } else if (activeTab.name === '进行中') {
                filtered = filtered.filter(task => task.statusType === 'inProgress');
            } else if (activeTab.name === '已完成') {
                filtered = filtered.filter(task => task.statusType === 'completed');
            } else {
                filtered = filtered.filter(task => task.statusType === 'canceled');
            }
            // 应用筛选条件
            if (this.filterCriteria.type) {
                filtered = filtered.filter(task => task.type === this.filterCriteria.type);
            }

            if (this.filterCriteria.owner) {
                filtered = filtered.filter(task => task.owner.includes(this.filterCriteria.owner));
            }

            if (this.filterCriteria.startDate) {
                filtered = filtered.filter(task => task.scheduledDate >= this.filterCriteria.startDate);
            }

            if (this.filterCriteria.endDate) {
                filtered = filtered.filter(task => task.scheduledDate <= this.filterCriteria.endDate);
            }
            // 根据搜索关键词过滤任务名称或企业名称
            if (this.taskSearchQuery.trim() !== '') {
                const query = this.taskSearchQuery.trim().toLowerCase();
                filtered = filtered.filter(task =>
                    task.name.toLowerCase().includes(query) ||
                    task.company.toLowerCase().includes(query)
                );
            }
            return filtered;
        },
        // 计算当前页的任务数据
        paginatedTasks() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.filteredTasks.slice(start, end);
        },

        // 计算总页数
        totalPages() {
            return Math.ceil(this.filteredTasks.length / this.pageSize);
        },

        // 生成页码数组
        pageNumbers() {
            const pages = [];
            for (let i = 1; i <= this.totalPages; i++) {
                pages.push(i);
            }
            return pages;
        },
        
        // 巡查记录分页相关计算属性
        filteredRecords() {
            // 根据筛选条件过滤巡查记录
            let filtered = this.inspectionRecords;
            
            // 应用筛选条件
            if (this.recordFilterCriteria.company) {
                filtered = filtered.filter(record => 
                    record.company.toLowerCase().includes(this.recordFilterCriteria.company.toLowerCase()));
            }
            
            if (this.recordFilterCriteria.type) {
                filtered = filtered.filter(record => record.type === this.recordFilterCriteria.type);
            }
            
            if (this.recordFilterCriteria.result) {
                filtered = filtered.filter(record => record.result === this.recordFilterCriteria.result);
            }
            
            if (this.recordFilterCriteria.inspector) {
                filtered = filtered.filter(record => 
                    record.inspector.toLowerCase().includes(this.recordFilterCriteria.inspector.toLowerCase()));
            }
            
            // 按记录编号搜索
            if (this.recordFilterCriteria.recordId) {
                filtered = filtered.filter(record => 
                    record.id.toLowerCase().includes(this.recordFilterCriteria.recordId.toLowerCase()));
            }
            
            // 按时间范围筛选
            if (this.recordFilterCriteria.timeRange && this.recordFilterCriteria.timeRange !== '全部时间') {
                const now = new Date();
                let cutoffDate;
                
                switch (this.recordFilterCriteria.timeRange) {
                    case '近 7 天':
                        cutoffDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
                        break;
                    case '近 30 天':
                        cutoffDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
                        break;
                    case '近 90 天':
                        cutoffDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
                        break;
                    case '近 180 天':
                        cutoffDate = new Date(now.getTime() - 180 * 24 * 60 * 60 * 1000);
                        break;
                    case '近 1 年':
                        cutoffDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
                        break;
                    default:
                        cutoffDate = null;
                }
                
                if (cutoffDate) {
                    filtered = filtered.filter(record => {
                        const recordDate = new Date(record.date);
                        return recordDate >= cutoffDate;
                    });
                }
            }
            
            // 应用排序
            if (this.currentSortOption) {
                filtered.sort((a, b) => {
                    switch (this.currentSortOption) {
                        case 'date_desc':
                            return new Date(b.date) - new Date(a.date);
                        case 'date_asc':
                            return new Date(a.date) - new Date(b.date);
                        case 'company_asc':
                            return a.company.localeCompare(b.company);
                        case 'company_desc':
                            return b.company.localeCompare(a.company);
                        default:
                            return 0;
                    }
                });
            }
            
            return filtered;
        },
        
        // 计算当前页的巡查记录数据
        paginatedRecords() {
            const start = (this.recordCurrentPage - 1) * this.recordPageSize;
            const end = start + this.recordPageSize;
            return this.filteredRecords.slice(start, end);
        },
        
        // 计算巡查记录总页数
        recordTotalPages() {
            return Math.ceil(this.filteredRecords.length / this.recordPageSize);
        },
        
        // 生成巡查记录页码数组
        recordPageNumbers() {
            const pages = [];
            // 如果页数太多，只显示当前页附近的页码
            if (this.recordTotalPages <= 5) {
                for (let i = 1; i <= this.recordTotalPages; i++) {
                    pages.push(i);
                }
            } else {
                // 始终显示第一页
                pages.push(1);
                
                // 显示当前页附近的页码
                const startPage = Math.max(2, this.recordCurrentPage - 1);
                const endPage = Math.min(this.recordTotalPages - 1, this.recordCurrentPage + 1);
                
                // 如果当前页靠近第一页，添加省略号
                if (startPage > 2) {
                    pages.push('...');
                }
                
                // 添加中间页码
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }
                
                // 如果当前页靠近最后一页，添加省略号
                if (endPage < this.recordTotalPages - 1) {
                    pages.push('...');
                }
                
                // 始终显示最后一页
                pages.push(this.recordTotalPages);
            }
            return pages;
        },
        
        // 巡查报告管理分页相关计算属性
        // 分页后的报告列表
        paginatedReports() {
            const start = (this.reportCurrentPage - 1) * this.reportPageSize;
            const end = start + this.reportPageSize;
            return this.inspectionReports.slice(start, end);
        },
        
        // 计算报告总页数
        reportTotalPages() {
            return Math.ceil(this.inspectionReports.length / this.reportPageSize);
        },
        
        // 生成报告页码数组
        reportPageNumbers() {
            const pages = [];
            // 如果页数太多，只显示当前页附近的页码
            if (this.reportTotalPages <= 5) {
                for (let i = 1; i <= this.reportTotalPages; i++) {
                    pages.push(i);
                }
            } else {
                // 始终显示第一页
                pages.push(1);
                
                // 显示当前页附近的页码
                const startPage = Math.max(2, this.reportCurrentPage - 1);
                const endPage = Math.min(this.reportTotalPages - 1, this.reportCurrentPage + 1);
                
                // 如果当前页靠近第一页，添加省略号
                if (startPage > 2) {
                    pages.push('...');
                }
                
                // 添加中间页码
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }
                
                // 如果当前页靠近最后一页，添加省略号
                if (endPage < this.reportTotalPages - 1) {
                    pages.push('...');
                }
                
                // 始终显示最后一页
                if (this.reportTotalPages > 1) {
                    pages.push(this.reportTotalPages);
                }
            }
            return pages;
        },
        
        // 报告分类统计计算属性
        reportTypeStatistics() {
            const statistics = {
                '常规巡查报告': 0,
                '专项巡查报告': 0,
                '应急巡查报告': 0,
                '问题整改报告': 0
            };
            
            this.inspectionReports.forEach(report => {
                if (report.type === '常规巡查报告') {
                    statistics['常规巡查报告']++;
                } else if (report.type === '专项巡查报告') {
                    statistics['专项巡查报告']++;
                } else if (report.type === '应急巡查报告') {
                    statistics['应急巡查报告']++;
                } else if (report.type === '整改报告') {
                    statistics['问题整改报告']++;
                }
            });
            
            return statistics;
        }
    },
    watch: {
        // 当通过路由参数从任务详情返回时，应用任务状态更新
        $route() {
            this.applyTaskUpdateFromRoute();
        }
    },
    mounted() {
        this.generateCalendarDates();
        this.initPlanCompletionChart();
        this.initReportStatisticsChart();
        this.initTaskCompletionChart();
        this.initIssueTypeChart();
        this.initIssueFixRateChart();
        this.initCompanyDistributionChart();
        // 响应窗口大小变化
        window.addEventListener('resize', this.handleResize);
        // 添加点击事件监听器，用于关闭下拉菜单
        document.addEventListener('click', this.closeDropdowns);
        // 初始化时检查是否有从任务详情传回的更新
        this.applyTaskUpdateFromRoute();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        document.removeEventListener('click', this.closeDropdowns);
    },
    methods: {
        // 显示计划详情
        showPlanDetails(plan) {
            this.selectedPlan = plan;
            this.showDetailModal = true;
        },
        // 接收 TaskDetails 返回的任务更新并同步列表与计数
        applyTaskUpdateFromRoute() {
            const q = (this.$route && this.$route.query) ? this.$route.query : {};
            const id = q.updatedTaskId;
            const newType = q.updatedStatusType;
            const newText = q.updatedStatus;
            if (!id || !newType) return;

            const task = this.inspectionTasks.find(t => String(t.code) === String(id));
            if (!task) return;

            const prevType = task.statusType;
            if (prevType === newType && task.status === newText) {
                // 已同步，无需重复处理
            } else {
                const textMap = {
                    pending: '待处理',
                    inProgress: '进行中',
                    completed: '已完成',
                    canceled: '已取消'
                };
                const classMap = {
                    pending: 'bg-blue-100 text-blue-800',
                    inProgress: 'bg-yellow-100 text-yellow-800',
                    completed: 'bg-green-100 text-green-800',
                    canceled: 'bg-gray-100 text-gray-800'
                };
                const idxMap = { pending: 0, inProgress: 1, completed: 2, canceled: 3 };

                // 更新计数（先旧状态减一，再新状态加一）
                if (prevType !== newType) {
                    if (idxMap[prevType] !== undefined) {
                        this.taskTabs[idxMap[prevType]].count = Math.max(0, this.taskTabs[idxMap[prevType]].count - 1);
                    }
                    if (idxMap[newType] !== undefined) {
                        this.taskTabs[idxMap[newType]].count = this.taskTabs[idxMap[newType]].count + 1;
                    }
                }

                // 更新任务项状态
                task.statusType = newType;
                task.status = newText || textMap[newType] || task.status;
                task.statusClass = classMap[newType] || task.statusClass;
            }

            // 清理一次性路由参数，避免重复应用
            this.$router.replace({ path: '/patrol' });
        },
        
        showTaskDetails(task) {
            // 跳转到任务详情页面，通过路由参数传递任务信息
            // 构造可选的任务描述与企业信息（地址、联系人），来源参考 SummaryInformation.companyList
            const companyInfoMap = {
                '河北钢铁集团有限公司': {
                    address: '河北省石家庄市长安区建设南大街161号',
                    contact: '张经理 (138****5678)'
                },
                '山东泰山钢铁有限公司': {
                    address: '山东省泰安市泰山区钢城路88号',
                    contact: '李总监 (139****1234)'
                },
                '江苏沿海钢铁集团': {
                    address: '江苏省连云港市连云区海滨大道256号',
                    contact: '王经理 (135****9876)'
                },
                '湖北武钢有限责任公司': {
                    address: '湖北省武汉市青山区厂前街290号',
                    contact: '刘主管 (136****4321)'
                },
                '辽宁鞍钢集团有限公司': {
                    address: '辽宁省鞍山市铁东区和平路3号',
                    contact: '赵经理 (137****5432)'
                },
                '河南安阳钢铁厂': {
                    address: '河南省安阳市殷都区梅东路566号',
                    contact: '钱总监 (133****7890)'
                },
                '重庆钢铁股份有限公司': {
                    address: '重庆市长寿区钢城大道1号',
                    contact: '孙经理 (138****2345)'
                },
                '云南昆钢钢铁集团': {
                    address: '云南省昆明市安宁市昆钢路25号',
                    contact: '周主管 (135****6789)'
                },
                '广东韶钢松山股份有限公司': {
                    address: '广东省韶关市曲江区马坝镇',
                    contact: '吴经理 (139****3456)'
                },
                '福建三钢闽光股份有限公司': {
                    address: '福建省三明市梅列区工业路25号',
                    contact: '郑主管 (136****7890)'
                }
            };
            const info = companyInfoMap[task.company] || {};
            const address = info.address || '';
            const contact = info.contact || '';
            const description =
                task.type === '复查'
                    ? '针对上次巡查隐患整改落实情况进行复查，重点覆盖高炉煤气系统、电气设施与特种设备运行状态。'
                    : `${task.type}任务：${task.company}，负责人 ${task.owner}。`;
            this.$router.push({
                path: '/task-details',
                query: {
                    taskId: task.code,
                    taskName: task.name,
                    company: task.company,
                    type: task.type,
                    owner: task.owner,
                    scheduledDate: task.scheduledDate,
                    status: task.status,
                    statusType: task.statusType,
                    description,
                    address,
                    contact
                }
            });
        },
        
        showRecordDetails(record) {
            this.selectedRecord = record;
            this.showRecordDetailModal = true;
        },
        
        exportRecords() {
            // 导出巡查记录为CSV文件
            try {
                // 准备CSV数据
                const headers = ['记录编号', '企业名称', '巡查类型', '巡查人员', '巡查日期', '巡查结果', '发现问题数'];
                
                // 获取当前筛选后的记录数据
                const recordsToExport = this.filteredInspectionRecords || this.inspectionRecords;
                
                const csvData = recordsToExport.map(record => [
                    record.id || '',
                    record.company || '',
                    record.type || '',
                    record.inspector || '',
                    record.date || '',
                    record.result || '',
                    record.issueCount || 0
                ]);
                
                // 生成CSV内容
                let csvContent = '\uFEFF'; // BOM for UTF-8
                csvContent += headers.join(',') + '\n';
                csvContent += csvData.map(row => 
                    row.map(field => `"${String(field).replace(/"/g, '""')}"`).join(',')
                ).join('\n');
                
                // 创建Blob对象
                const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
                
                // 创建下载链接
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                
                // 生成文件名（包含当前日期）
                const now = new Date();
                const dateStr = now.getFullYear() + '-' + 
                    String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                    String(now.getDate()).padStart(2, '0');
                link.setAttribute('download', `巡查记录_${dateStr}.csv`);
                
                // 触发下载
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 清理URL对象
                URL.revokeObjectURL(url);
                
                // 显示成功提示
                this.$message({
                    message: `巡查记录导出成功！共导出 ${recordsToExport.length} 条记录`,
                    type: 'success'
                });
                
            } catch (error) {
                this.$message({
                    message: '导出失败，请重试',
                    type: 'error'
                });
            }
        },
        
        toggleAdvancedSearch() {
            // 切换高级搜索面板显示状态
            this.showAdvancedSearchPanel = !this.showAdvancedSearchPanel;
        },
        
        // 处理排序变化
        handleSortChange() {
            // 重置到第一页
            this.recordCurrentPage = 1;
        },
        
        // 清空所有筛选条件
        clearAllFilters() {
            this.recordFilterCriteria = {
                company: '',
                type: '',
                result: '',
                inspector: '',
                timeRange: '近 180 天',
                recordId: ''
            };
            this.currentSortOption = 'date_desc';
            this.recordCurrentPage = 1;
        },
        
        // 处理筛选变化
        handleFilterChange() {
            // 重置到第一页
            this.recordCurrentPage = 1;
        },
        
        // 切换时间范围下拉菜单
        toggleTimeRangeDropdown() {
            this.showTimeRangeDropdown = !this.showTimeRangeDropdown;
        },
        
        // 选择时间范围
        selectTimeRange(range) {
            this.recordFilterCriteria.timeRange = range;
            this.showTimeRangeDropdown = false;
            this.handleFilterChange();
        },
        
        // 导出计划
        exportPlan() {
            // 检查是否有计划可导出
            if (this.inspectionPlans.length === 0) {
                ElMessage.success('没有可导出的巡查计划');
                return;
            }
            
            // 准备CSV数据
            const headers = ['计划名称', '计划编号', '计划周期', '巡查企业数', '巡查内容', '负责部门', '状态'];
            const rows = this.inspectionPlans.map(plan => [
                plan.name,
                plan.code,
                plan.period,
                plan.companyCount,
                plan.content,
                plan.department,
                plan.status
            ]);
            
            // 生成CSV内容
            let csvContent = headers.join(',') + '\n';
            rows.forEach(row => {
                csvContent += row.join(',') + '\n';
            });
            
            // 创建Blob对象
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            
            // 创建下载链接
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            
            // 设置下载属性
            link.setAttribute('href', url);
            link.setAttribute('download', `巡查计划导出_${new Date().toISOString().slice(0, 10)}.csv`);
            link.style.visibility = 'hidden';
            
            // 添加到文档并触发点击
            document.body.appendChild(link);
            link.click();
            
            // 清理
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
            
            // 提示用户
            ElMessage.success('巡查计划导出成功');
        },
        
        // 编辑计划
        editPlan(plan, index) {
            // 将当前计划数据填充到编辑表单
            this.newPlanForm = {
                name: plan.name,
                type: plan.type || '',
                period: plan.period || '',
                department: plan.department || '',
                startDate: plan.startDate || '',
                endDate: plan.endDate || '',
                companies: [...(plan.companies || [])],
                content: plan.content || '',
                remarks: plan.remarks || ''
            };
            
            // 设置编辑状态
            this.editingPlanIndex = index;
            
            // 显示编辑弹窗
            this.showNewPlanModal = true;
        },
        
        // 删除计划
        deletePlan(index) {
            ElMessageBox.confirm('确定要删除这个巡查计划吗？', '删除确认', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.inspectionPlans.splice(index, 1);
                ElMessage.success('计划删除成功');
            })
            .catch(() => {
                ElMessage.info('已取消删除');
            });
        },
        
        // 保存计划（新增或编辑）
        savePlan() {
            // 简单验证表单
            if (!this.newPlanForm.name) {
                ElMessage.success('请输入计划名称');
                return;
            }
            if (!this.newPlanForm.type) {
                ElMessage.success('请选择计划类型');
                return;
            }
            if (!this.newPlanForm.period) {
                ElMessage.success('请选择计划周期');
                return;
            }
            if (!this.newPlanForm.department) {
                ElMessage.success('请选择负责部门');
                return;
            }
            if (!this.newPlanForm.startDate) {
                ElMessage.success('请选择开始日期');
                return;
            }
            if (!this.newPlanForm.endDate) {
                ElMessage.success('请选择结束日期');
                return;
            }
            if (this.newPlanForm.companies.length === 0) {
                ElMessage.success('请至少选择一个巡查企业');
                return;
            }
            
            // 创建或更新计划对象
            const planData = {
                name: this.newPlanForm.name,
                code: this.editingPlanIndex >= 0 
                    ? this.inspectionPlans[this.editingPlanIndex].code 
                    : 'JH-' + new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0'),
                period: this.newPlanForm.startDate + ' 至 ' + this.newPlanForm.endDate,
                companyCount: this.newPlanForm.companies.length,
                content: this.newPlanForm.content || '未填写',
                department: this.newPlanForm.department,
                status: '未开始',
                statusClass: 'bg-blue-100 text-blue-800'
            };
            
            if (this.editingPlanIndex >= 0) {
                // 更新现有计划
                this.inspectionPlans.splice(this.editingPlanIndex, 1, planData);
                
                // 提示更新成功
                ElMessage.success('计划更新成功');
            } else {
                // 添加新计划
                this.inspectionPlans.unshift(planData);
                
                // 提示保存成功
                ElMessage.success('计划创建成功');
            }
            
            // 重置表单和编辑状态
            this.newPlanForm = {
                name: '',
                type: '',
                period: '',
                department: '',
                startDate: '',
                endDate: '',
                companies: [],
                content: '',
                remarks: ''
            };
            this.editingPlanIndex = -1;
            
            // 关闭弹窗
            this.showNewPlanModal = false;
        },
        
        // 关闭新建计划弹窗时重置表单
        closeNewPlanModal() {
            this.showNewPlanModal = false;
            this.newPlanForm = {
                name: '',
                type: '',
                period: '',
                department: '',
                startDate: '',
                endDate: '',
                companies: [],
                content: '',
                remarks: ''
            };
            // 关闭所有计划下拉菜单
            Object.keys(this.planDropdownOpen).forEach(key => {
                this.planDropdownOpen[key] = false;
            });
            // 重置编辑状态
            this.editingPlanIndex = -1;
        },
        // 切换计划下拉菜单显示状态
        togglePlanDropdown(type) {
            // 关闭其他下拉菜单
            Object.keys(this.planDropdownOpen).forEach(key => {
                if (key !== type) {
                    this.planDropdownOpen[key] = false;
                }
            });
            // 切换当前下拉菜单状态
            this.planDropdownOpen[type] = !this.planDropdownOpen[type];
        },
        
        // 选择计划类型
        selectPlanType(type) {
            this.newPlanForm.type = type;
            this.planDropdownOpen.type = false;
        },
        
        // 选择计划周期
        selectPlanPeriod(period) {
            this.newPlanForm.period = period;
            this.planDropdownOpen.period = false;
        },
        
        // 选择负责部门
        selectDepartment(dept) {
            this.newPlanForm.department = dept;
            this.planDropdownOpen.department = false;
        },
        
        // 切换企业选择
        toggleCompanySelection(company) {
            const index = this.newPlanForm.companies.indexOf(company);
            if (index > -1) {
                // 如果已选择，则移除
                this.newPlanForm.companies.splice(index, 1);
            } else {
                // 如果未选择，则添加
                this.newPlanForm.companies.push(company);
            }
        },
        
        // 从计划中移除企业
        removeCompanyFromPlan(index) {
            this.newPlanForm.companies.splice(index, 1);
        },
        
        // 保存新建计划
        saveNewPlan() {
            // 简单验证表单
            if (!this.newPlanForm.name) {
                ElMessage.success('请输入计划名称');
                return;
            }
            if (!this.newPlanForm.type) {
                ElMessage.success('请选择计划类型');
                return;
            }
            if (!this.newPlanForm.period) {
                ElMessage.success('请选择计划周期');
                return;
            }
            if (!this.newPlanForm.department) {
                ElMessage.success('请选择负责部门');
                return;
            }
            if (!this.newPlanForm.startDate) {
                ElMessage.success('请选择开始日期');
                return;
            }
            if (!this.newPlanForm.endDate) {
                ElMessage.success('请选择结束日期');
                return;
            }
            if (this.newPlanForm.companies.length === 0) {
                ('请至少选择一个巡查企业');
                return;
            }
            
            // 创建新计划对象
            const newPlan = {
                name: this.newPlanForm.name,
                code: 'JH-' + new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0'),
                period: this.newPlanForm.startDate + ' 至 ' + this.newPlanForm.endDate,
                companyCount: this.newPlanForm.companies.length,
                content: this.newPlanForm.content || '未填写',
                department: this.newPlanForm.department,
                status: '未开始',
                statusClass: 'bg-blue-100 text-blue-800'
            };
            
            // 添加到计划列表
            this.inspectionPlans.unshift(newPlan);
            
            // 重置表单
            this.newPlanForm = {
                name: '',
                type: '',
                period: '',
                department: '',
                startDate: '',
                endDate: '',
                companies: [],
                content: '',
                remarks: ''
            };
            
            // 关闭弹窗
            this.showNewPlanModal = false;
            
            // 提示保存成功
            ElMessage.success('计划创建成功');
        },
        
        // 关闭新建计划弹窗时重置表单
        closeNewPlanModal() {
            this.showNewPlanModal = false;
            this.newPlanForm = {
                name: '',
                type: '',
                period: '',
                department: '',
                startDate: '',
                endDate: '',
                companies: [],
                content: '',
                remarks: ''
            };
            // 关闭所有计划下拉菜单
            Object.keys(this.planDropdownOpen).forEach(key => {
                this.planDropdownOpen[key] = false;
            });
        },
        // 切换下拉菜单显示状态
        toggleDropdown(type) {
            // 关闭其他下拉菜单
            Object.keys(this.dropdownOpen).forEach(key => {
                if (key !== type) {
                    this.dropdownOpen[key] = false;
                }
            });
            // 切换当前下拉菜单状态
            this.dropdownOpen[type] = !this.dropdownOpen[type];
        },

        // 选择巡查类型
        selectType(type) {
            this.newTaskForm.type = type;
            this.dropdownOpen.type = false;
        },

        // 选择巡查企业
        selectCompany(company) {
            this.newTaskForm.company = company;
            this.dropdownOpen.company = false;
        },

        // 选择负责人
        selectOwner(owner) {
            this.newTaskForm.owner = owner;
            this.dropdownOpen.owner = false;
        },

        // 点击其他地方关闭下拉菜单
        closeDropdowns(event) {
            // 检查点击事件是否在下拉菜单内部
            const dropdowns = document.querySelectorAll('.relative');
            let clickedInside = false;

            dropdowns.forEach(dropdown => {
                if (dropdown.contains(event.target)) {
                    clickedInside = true;
                }
            });

            // 如果点击在下拉菜单外部，则关闭所有下拉菜单
            if (!clickedInside) {
                Object.keys(this.dropdownOpen).forEach(key => {
                    this.dropdownOpen[key] = false;
                });
            }
        },
        // 保存新建任务
        saveNewTask() {
            // 简单验证表单
            if (!this.newTaskForm.name) {
                ElMessage.success('请输入任务名称');
                return;
            }
            if (!this.newTaskForm.type) {
                ElMessage.success('请选择巡查类型');
                return;
            }
            if (!this.newTaskForm.company) {
                ElMessage.success('请选择巡查企业');
                return;
            }
            if (!this.newTaskForm.owner) {
                ElMessage.success('请选择负责人');
                return;
            }
            if (!this.newTaskForm.startDate) {
                ElMessage.success('请选择计划开始时间');
                return;
            }
            if (!this.newTaskForm.endDate) {
                ElMessage.success('请选择计划结束时间');
                return;
            }

            // 创建新任务对象
            const newTask = {
                name: this.newTaskForm.name,
                code: 'XC-' + new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + new Date().getDate().toString().padStart(2, '0') + '-' + Math.floor(Math.random() * 1000).toString().padStart(3, '0'),
                company: this.newTaskForm.company,
                type: this.newTaskForm.type,
                owner: this.newTaskForm.owner,
                scheduledDate: this.newTaskForm.startDate,
                status: '待处理',
                statusType: 'pending',
                statusClass: 'bg-blue-100 text-blue-800'
            };

            // 添加到任务列表
            this.inspectionTasks.unshift(newTask);
            // 更新日历以反映新增任务
            this.generateCalendarDates();

            // 更新待处理任务计数
            this.taskTabs[0].count++;

            // 重置表单
            this.newTaskForm = {
                name: '',
                type: '',
                company: '',
                owner: '',
                startDate: '',
                endDate: '',
                content: '',
                requirements: ''
            };

            // 关闭弹窗
            this.showNewTaskModal = false;

            // 提示保存成功
            ElMessage.success('任务创建成功');
        },
        // 关闭新建任务弹窗时重置表单
        closeNewTaskModal() {
            this.showNewTaskModal = false;
            this.newTaskForm = {
                name: '',
                type: '',
                company: '',
                owner: '',
                startDate: '',
                endDate: '',
                content: '',
                requirements: ''
            };
            // 关闭所有下拉菜单
            Object.keys(this.dropdownOpen).forEach(key => {
                this.dropdownOpen[key] = false;
            });
        },
        // 应用筛选条件
        applyFilter() {
            this.showFilterModal = false;
        },
        // 清除筛选条件
        clearFilter() {
            this.filterCriteria = {
                type: '',
                owner: '',
                startDate: '',
                endDate: ''
            };
            this.showFilterModal = false;
        },
        // 执行任务方法
        executeTask(task) {
            // 更新任务状态为"进行中"
            task.status = '进行中';
            task.statusType = 'inProgress';
            task.statusClass = 'bg-yellow-100 text-yellow-800';

            // 更新任务标签计数
            this.taskTabs[0].count--; // 待处理减1
            this.taskTabs[1].count++; // 进行中加1

            ElMessage.success(`任务"${task.name}"已开始执行`);
        },

        // 提交任务方法
        submitTask(task) {
            // 更新任务状态为"已完成"
            task.status = '已完成';
            task.statusType = 'completed';
            task.statusClass = 'bg-green-100 text-green-800';

            // 更新任务标签计数
            this.taskTabs[1].count--; // 进行中减1
            this.taskTabs[2].count++; // 已完成加1

            ElMessage.success(`任务"${task.name}"已提交完成`);
        },
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        setActiveTaskTab(index) {
            this.taskTabs.forEach((tab, i) => {
                tab.active = i === index;
            });
        },
        generateCalendarDates() {
            const year = this.calendarYear;
            const month = this.calendarMonth; // 1-12
            const firstDay = new Date(year, month - 1, 1);
            const daysInMonth = new Date(year, month, 0).getDate();
            const startWeekday = firstDay.getDay(); // 0=周日
            const prevMonthLastDay = new Date(year, month - 1, 0).getDate();

            const dates = [];
            // 前导占位：上月末尾天数
            for (let i = startWeekday; i > 0; i--) {
                dates.push({
                    day: prevMonthLastDay - i + 1,
                    month: 'prev',
                    tasks: null
                });
            }

            // 统计当前月每天任务类型
            const dayTaskMap = {};
            this.inspectionTasks.forEach(t => {
                if (!t.scheduledDate) return;
                const parts = String(t.scheduledDate).split('-');
                if (parts.length !== 3) return;
                const y = parseInt(parts[0], 10);
                const m = parseInt(parts[1], 10);
                const d = parseInt(parts[2], 10);
                if (y !== year || m !== month) return;
                const typeKey = (t.type === '常规巡查') ? 'regular'
                    : (t.type === '专项巡查') ? 'special'
                    : (t.type === '应急巡查') ? 'emergency'
                    : null;
                if (!typeKey) return;
                if (!dayTaskMap[d]) dayTaskMap[d] = {};
                dayTaskMap[d][typeKey] = (dayTaskMap[d][typeKey] || 0) + 1;
            });

            // 当前月日期
            for (let day = 1; day <= daysInMonth; day++) {
                const tasksObj = dayTaskMap[day] || null;
                dates.push({ day, month: 'current', tasks: tasksObj });
            }

            // 尾随占位：下月开始天数补齐一周
            const rest = dates.length % 7;
            const nextCount = rest === 0 ? 0 : 7 - rest;
            for (let i = 1; i <= nextCount; i++) {
                dates.push({ day: i, month: 'next', tasks: null });
            }

            this.calendarDates = dates;
        },
        getDateClass(date) {
            let classes = '';
            const selected = this.isSelected(date);
            if (selected) {
                classes = 'bg-blue-50 border-blue-300';
            } else if (date.month === 'prev' || date.month === 'next') {
                classes = 'text-gray-400 bg-gray-100';
            } else {
                const now = new Date();
                const isToday = (this.calendarYear === now.getFullYear() &&
                                 this.calendarMonth === (now.getMonth() + 1) &&
                                 date.day === now.getDate());
                classes = isToday ? 'bg-blue-50 border-blue-300' : 'text-gray-800 bg-white border-gray-200';
            }
            return classes;
        },
        isToday(date) {
            const now = new Date();
            return date.month === 'current' &&
                this.calendarYear === now.getFullYear() &&
                this.calendarMonth === (now.getMonth() + 1) &&
                date.day === now.getDate();
        },
        isSelected(date) {
            if (!this.selectedDateKey) return false;
            return this.getDateIso(date) === this.selectedDateKey;
        },
        getDateIso(date) {
            // 依据当前显示的年月与 date.month 计算实际年月
            let y = this.calendarYear;
            let m = this.calendarMonth; // 1-12
            if (date.month === 'prev') {
                if (m === 1) { y -= 1; m = 12; } else { m -= 1; }
            } else if (date.month === 'next') {
                if (m === 12) { y += 1; m = 1; } else { m += 1; }
            }
            const d = String(date.day).padStart(2, '0');
            const mm = String(m).padStart(2, '0');
            return `${y}-${mm}-${d}`;
        },
        selectDate(date) {
            this.selectedDateKey = this.getDateIso(date);
        },
        prevMonth() {
            if (this.calendarMonth === 1) {
                this.calendarMonth = 12;
                this.calendarYear -= 1;
            } else {
                this.calendarMonth -= 1;
            }
            this.generateCalendarDates();
        },
        nextMonth() {
            if (this.calendarMonth === 12) {
                this.calendarMonth = 1;
                this.calendarYear += 1;
            } else {
                this.calendarMonth += 1;
            }
            this.generateCalendarDates();
        },
        getTaskTypeClass(type) {
            if (type === 'regular') return 'bg-blue-500';
            if (type === 'special') return 'bg-yellow-500';
            if (type === 'emergency') return 'bg-red-500';
            return 'bg-gray-500';
        },
        getTaskCardClass(statusType) {
            if (statusType === 'pending') return 'bg-blue-50 border-l-4 border-blue-500';
            if (statusType === 'inProgress') return 'bg-yellow-50 border-l-4 border-yellow-500';
            if (statusType === 'completed') return 'bg-green-50 border-l-4 border-green-500';
            return 'bg-gray-50 border-l-4 border-gray-500';
        },
        getTaskDotClass(statusType) {
            if (statusType === 'pending') return 'bg-blue-500';
            if (statusType === 'inProgress') return 'bg-yellow-500';
            if (statusType === 'completed') return 'bg-green-500';
            return 'bg-gray-500';
        },
        handleResize() {
            const charts = [
                this.$refs.planCompletionChart,
                this.$refs.reportStatisticsChart,
                this.$refs.taskCompletionChart,
                this.$refs.issueTypeChart,
                this.$refs.issueFixRateChart,
                this.$refs.companyDistributionChart
            ];
            charts.forEach(ref => {
                if (ref) {
                    const chart = echarts.getInstanceByDom(ref);
                    if (chart) {
                        chart.resize();
                    }
                }
            });
        },
        initPlanCompletionChart() {
            if (!this.$refs.planCompletionChart) return;
            const chart = echarts.init(this.$refs.planCompletionChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['已完成', '执行中', '未开始']
                },
                series: [
                    {
                        name: '计划完成情况',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 12, name: '已完成', itemStyle: { color: '#48bb78' } },
                            { value: 5, name: '执行中', itemStyle: { color: '#4299e1' } },
                            { value: 3, name: '未开始', itemStyle: { color: '#a0aec0' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initReportStatisticsChart() {
            if (!this.$refs.reportStatisticsChart) return;
            const chart = echarts.init(this.$refs.reportStatisticsChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['常规巡查', '专项巡查', '应急巡查', '整改报告'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                series: [
                    {
                        name: '常规巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#4299e1'
                        },
                        data: [12, 14, 10, 15, 18, 20, 25]
                    },
                    {
                        name: '专项巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#ecc94b'
                        },
                        data: [8, 6, 10, 12, 8, 10, 12]
                    },
                    {
                        name: '应急巡查',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#f56565'
                        },
                        data: [2, 3, 1, 2, 3, 4, 5]
                    },
                    {
                        name: '整改报告',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#805ad5'
                        },
                        data: [5, 8, 6, 10, 12, 15, 18]
                    }
                ]
            };
            chart.setOption(option);
        },
        initTaskCompletionChart() {
            if (!this.$refs.taskCompletionChart) return;
            const chart = echarts.init(this.$refs.taskCompletionChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['计划任务数', '完成任务数', '完成率'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '任务数',
                        position: 'left',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#4299e1'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color: '#4299e1'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '完成率',
                        min: 0,
                        max: 100,
                        position: 'right',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#48bb78'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            color: '#48bb78'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '计划任务数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: [20, 25, 22, 28, 30, 35, 40],
                        itemStyle: {
                            color: '#4299e1'
                        }
                    },
                    {
                        name: '完成任务数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: [15, 20, 18, 24, 26, 32, 35],
                        itemStyle: {
                            color: '#805ad5'
                        }
                    },
                    {
                        name: '完成率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [75, 80, 82, 86, 87, 91, 88],
                        itemStyle: {
                            color: '#48bb78'
                        }
                    }
                ]
            };
            chart.setOption(option);
        },
        initIssueTypeChart() {
            if (!this.$refs.issueTypeChart) return;
            const chart = echarts.init(this.$refs.issueTypeChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['设备隐患', '工艺隐患', '消防隐患', '电气隐患', '特种设备', '其他隐患']
                },
                series: [
                    {
                        name: '问题类型分布',
                        type: 'pie',
                        radius: ['45%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 35, name: '设备隐患', itemStyle: { color: '#4299e1' } },
                            { value: 20, name: '工艺隐患', itemStyle: { color: '#48bb78' } },
                            { value: 15, name: '消防隐患', itemStyle: { color: '#f56565' } },
                            { value: 12, name: '电气隐患', itemStyle: { color: '#ecc94b' } },
                            { value: 10, name: '特种设备', itemStyle: { color: '#805ad5' } },
                            { value: 8, name: '其他隐患', itemStyle: { color: '#a0aec0' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },
        initIssueFixRateChart() {
            if (!this.$refs.issueFixRateChart) return;
            const chart = echarts.init(this.$refs.issueFixRateChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['发现问题数', '已整改数', '整改率'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                        axisLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        },
                        axisLabel: {
                            color: '#718096'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '问题数',
                        position: 'left',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#f56565'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}',
                            color: '#f56565'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e2e8f0'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '整改率',
                        min: 0,
                        max: 100,
                        position: 'right',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#48bb78'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%',
                            color: '#48bb78'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '发现问题数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: [45, 52, 48, 60, 55, 65, 70],
                        itemStyle: {
                            color: '#f56565'
                        }
                    },
                    {
                        name: '已整改数',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: [30, 40, 38, 48, 45, 55, 55],
                        itemStyle: {
                            color: '#4299e1'
                        }
                    },
                    {
                        name: '整改率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [67, 77, 79, 80, 82, 85, 78],
                        itemStyle: {
                            color: '#48bb78'
                        }
                    }
                ]
            };
            chart.setOption(option);
        },
        initCompanyDistributionChart() {
            if (!this.$refs.companyDistributionChart) return;
            const chart = echarts.init(this.$refs.companyDistributionChart);
            const option = {
                animation: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['已巡查企业', '未巡查企业'],
                    top: 0,
                    right: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#718096'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['河北', '山东', '江苏', '辽宁', '河南', '湖北', '广东', '重庆'],
                    axisLine: {
                        lineStyle: {
                            color: '#e2e8f0'
                        }
                    },
                    axisLabel: {
                        color: '#718096'
                    }
                },
                series: [
                    {
                        name: '已巡查企业',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#4299e1'
                        },
                        data: [18, 16, 14, 12, 10, 9, 7, 6]
                    },
                    {
                        name: '未巡查企业',
                        type: 'bar',
                        stack: 'total',
                        emphasis: {
                            focus: 'series'
                        },
                        itemStyle: {
                            color: '#a0aec0'
                        },
                        data: [10, 9, 6, 6, 5, 3, 3, 2]
                    }
                ]
            };
            chart.setOption(option);
        },
        
        // 打开报告模板管理弹窗
        openReportTemplateModal() {
            this.showReportTemplateModal = true;
        },
        
        // 关闭报告模板管理弹窗
        closeReportTemplateModal() {
            this.showReportTemplateModal = false;
            this.showTemplateForm = false;
            this.editingTemplate = null;
            this.resetTemplateForm();
        },
        
        // 显示新建模板表单
        showNewTemplateForm() {
            this.showTemplateForm = true;
            this.editingTemplate = null;
            this.resetTemplateForm();
        },
        
        // 编辑模板
        editTemplate(template) {
            this.editingTemplate = template;
            this.newTemplate = { ...template };
            this.showTemplateForm = true;
        },
        
        // 保存模板
        saveTemplate() {
            if (this.editingTemplate) {
                // 编辑模式
                const index = this.reportTemplates.findIndex(t => t.id === this.editingTemplate.id);
                if (index !== -1) {
                    this.reportTemplates[index] = { ...this.newTemplate, id: this.editingTemplate.id };
                }
            } else {
                // 新建模式
                const newId = Math.max(...this.reportTemplates.map(t => t.id)) + 1;
                this.reportTemplates.push({
                    ...this.newTemplate,
                    id: newId,
                    createTime: new Date().toISOString().split('T')[0],
                    status: '启用'
                });
            }
            this.showTemplateForm = false;
            this.resetTemplateForm();
        },
        
        // 删除模板
  deleteTemplate(templateId) {
    ElMessageBox.confirm('确定要删除这个模板吗？', '删除确认', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.reportTemplates = this.reportTemplates.filter(t => t.id !== templateId);
      ElMessage.success('模板删除成功');
    }).catch(() => {
      ElMessage.info('已取消删除');
    });
  },
        
        // 切换模板状态
        toggleTemplateStatus(template) {
            template.status = template.status === '启用' ? '停用' : '启用';
        },
        
        // 重置模板表单
        resetTemplateForm() {
            this.newTemplate = {
                name: '',
                type: '',
                content: ''
            };
        },
        
        // 生成巡查报告
        generatePatrolReport() {
            // 基于当前筛选的记录生成报告
            const recordsToReport = this.filteredRecords;
            
            if (recordsToReport.length === 0) {
                ElMessage.warning('当前没有符合条件的巡查记录，请调整筛选条件');
                return;
            }
            
            // 模拟生成报告
            const reportData = {
                title: `巡查报告_${new Date().toISOString().split('T')[0]}`,
                records: recordsToReport,
                generateTime: new Date().toLocaleString(),
                totalRecords: recordsToReport.length,
                filterCriteria: { ...this.recordFilterCriteria },
                sortOption: this.currentSortOption
            };
            
            
            
            // 模拟下载报告
            setTimeout(() => {
                ElMessage.success(`报告生成成功：${reportData.title}`);
            }, 1000);
        },
        
        // 查看报告详情
        viewReport(report) {
            this.selectedReport = report;
            this.showViewReportModal = true;
        },
        
        // 关闭查看报告弹窗
        closeViewReportModal() {
            this.showViewReportModal = false;
            this.selectedReport = {};
        },
        
        // 查看巡查记录对应的报告
        viewRecordReport(record) {
            // 根据巡查记录查找对应的报告
            const relatedReport = this.inspectionReports.find(report => 
                report.company === record.company && 
                report.date === record.date
            );
            
            if (relatedReport) {
                // 如果找到对应报告，显示报告详情
                this.selectedReport = relatedReport;
                this.showViewReportModal = true;
            } else {
                // 如果没有找到对应报告，使用非原生确认弹窗
                ElMessageBox.confirm(`未找到该巡查记录的对应报告。\n是否要为 "${record.company}" 的巡查记录生成报告？`, '生成报告确认', {
                    confirmButtonText: '生成',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.generateReportForRecord(record);
                }).catch(() => {
                    ElMessage.info('已取消生成');
                });
            }
        },
        
        // 为特定巡查记录生成报告
        generateReportForRecord(record) {
            // 创建新的报告数据
            const newReport = {
                name: `${record.company}巡查报告`,
                id: `BG-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`,
                type: `${record.type}报告`,
                company: record.company,
                date: record.date,
                creator: record.inspector.split('、')[0], // 取第一个巡查员作为报告创建者
                status: '已完成',
                statusClass: 'bg-green-100 text-green-800',
                content: `
                    <h3>巡查基本信息</h3>
                    <p><strong>巡查编号：</strong>${record.id}</p>
                    <p><strong>巡查企业：</strong>${record.company}</p>
                    <p><strong>巡查类型：</strong>${record.type}</p>
                    <p><strong>巡查人员：</strong>${record.inspector}</p>
                    <p><strong>巡查日期：</strong>${record.date}</p>
                    <p><strong>巡查结果：</strong>${record.result}</p>
                    <p><strong>发现问题数：</strong>${record.issueCount}</p>
                    
                    <h3>巡查详情</h3>
                    <p>本次巡查针对${record.company}进行了全面的${record.type}，巡查过程中发现${record.issueCount}个问题。</p>
                    
                    <h3>问题汇总</h3>
                    <p>巡查结果为：${record.result}</p>
                    ${record.issueCount > 0 ? '<p>发现的问题需要企业及时整改，确保安全生产。</p>' : '<p>本次巡查未发现重大安全隐患，企业安全生产状况良好。</p>'}
                    
                    <h3>建议与要求</h3>
                    <p>建议企业继续保持良好的安全生产管理水平，定期开展安全检查和隐患排查。</p>
                `
            };
            
            // 将新报告添加到报告列表
            this.inspectionReports.unshift(newReport);
            
            // 显示新生成的报告
            this.selectedReport = newReport;
            this.showViewReportModal = true;
            
            // 显示成功提示
            this.$message({
                message: `报告生成成功！报告编号：${newReport.id}`,
                type: 'success'
            });
        },

        // 查看巡查任务对应的报告（任务列表“报告”按钮）
        viewTaskReport(task) {
            // 优先根据企业和类型匹配已有报告
            const typeLabel = `${task.type}报告`;
            const relatedReport = this.inspectionReports.find(report =>
                report.company === task.company &&
                (report.type === typeLabel || report.type.includes(task.type))
            );

            if (relatedReport) {
                this.selectedReport = relatedReport;
                this.showViewReportModal = true;
                return;
            }

            // 未找到则提示是否生成一份与任务关联的报告（非原生确认）
            ElMessageBox.confirm(`未找到该任务的对应报告。\n是否要为 "${task.company}" 的任务生成报告？`, '生成报告确认', {
                confirmButtonText: '生成',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 生成并添加新报告
                const newReport = {
                    name: `${task.company}${task.type}报告`,
                    id: `BG-${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}-${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`,
                    type: typeLabel,
                    company: task.company,
                    date: task.scheduledDate || new Date().toISOString().slice(0,10),
                    creator: task.owner,
                    status: '已完成',
                    statusClass: 'bg-green-100 text-green-800'
                };

                this.inspectionReports.unshift(newReport);
                this.selectedReport = newReport;
                this.showViewReportModal = true;

                ElMessage.success(`报告生成成功！报告编号：${newReport.id}`);
            }).catch(() => {
                ElMessage.info('已取消生成');
            });
        },
        
        // 下载报告
        downloadReport(report) {
            
            // 模拟下载功能
            const reportContent = `
巡查报告

报告名称：${report.name}
报告编号：${report.id}
报告类型：${report.type}
涉及企业：${report.company}
生成时间：${report.date}
创建人：${report.creator}
状态：${report.status}

一、巡查概况
本次巡查针对${report.company}进行${report.type}，巡查时间为${report.date}，巡查人员为${report.creator}。
本次巡查重点关注安全生产、环保达标、设备运行等关键领域。

二、巡查发现
通过现场检查和资料审核，发现以下情况：
• 安全生产制度执行情况良好，现场安全防护措施到位
• 环保设施运行正常，污染物排放符合标准要求
• 设备维护保养记录完整，关键设备运行状态良好
• 发现部分区域标识不够清晰，需要进一步完善

三、整改建议
针对发现的问题，提出以下整改建议：
• 完善现场安全标识，确保标识清晰可见
• 加强员工安全培训，提高安全意识
• 建立定期检查机制，确保问题及时发现和处理

四、总体评价
${report.company}在安全生产管理方面总体表现良好，各项制度执行到位，现场管理规范。
建议继续保持现有管理水平，并针对发现的问题及时整改，进一步提升安全管理水平。
            `;
            
            // 创建下载链接
            const blob = new Blob([reportContent], { type: 'text/plain;charset=utf-8' });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `${report.name}.txt`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
            
            ElMessage.success(`报告 "${report.name}" 下载成功！`);
        },
        
        // 删除报告
  deleteReport(report, index) {
    ElMessageBox.confirm(`确定要删除报告 "${report.name}" 吗？此操作不可恢复。`, '删除确认', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.inspectionReports.splice(index, 1);
      ElMessage.success(`报告 "${report.name}" 已删除！`);
    }).catch(() => {
      ElMessage.info('已取消删除');
    });
  },
        
        // 导出统计数据
        exportStatisticsData() {
            // 准备统计数据
            const statisticsData = {
                reportTypeStats: this.reportTypeStatistics,
                totalRecords: this.filteredRecords.length,
                totalReports: this.inspectionReports.length,
                exportTime: new Date().toLocaleString(),
                filterCriteria: { ...this.recordFilterCriteria }
            };
            
            // 准备CSV数据
            const headers = ['统计项目', '数值', '说明'];
            const rows = [
                ['常规巡查报告', this.reportTypeStatistics['常规巡查报告'], '当前筛选条件下的常规巡查报告数量'],
                ['专项巡查报告', this.reportTypeStatistics['专项巡查报告'], '当前筛选条件下的专项巡查报告数量'],
                ['应急巡查报告', this.reportTypeStatistics['应急巡查报告'], '当前筛选条件下的应急巡查报告数量'],
                ['问题整改报告', this.reportTypeStatistics['问题整改报告'], '当前筛选条件下的问题整改报告数量'],
                ['巡查记录总数', statisticsData.totalRecords, '当前筛选条件下的巡查记录总数'],
                ['报告总数', statisticsData.totalReports, '系统中的报告总数'],
                ['导出时间', statisticsData.exportTime, '数据导出的时间']
            ];
            
            // 生成CSV内容
            let csvContent = '\uFEFF'; // 添加BOM以支持中文
            csvContent += headers.join(',') + '\n';
            rows.forEach(row => {
                csvContent += row.map(cell => `"${cell}"`).join(',') + '\n';
            });
            
            // 创建Blob对象
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            
            // 创建下载链接
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);
            
            // 设置下载属性
            link.setAttribute('href', url);
            link.setAttribute('download', `巡查统计数据_${new Date().toISOString().slice(0, 10)}.csv`);
            link.style.visibility = 'hidden';
            
            // 添加到文档并触发点击
            document.body.appendChild(link);
            link.click();
            
            // 清理
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
            
            // 提示用户
            ElMessage.success(`统计数据导出成功：${statisticsData.exportTime}`);
        },
        
        // 生成分析报告
        generateAnalysisReport() {
            // 基于当前数据生成分析报告
            const reportData = {
                title: `巡查统计分析报告_${new Date().toISOString().split('T')[0]}`,
                generateTime: new Date().toLocaleString(),
                totalRecords: this.filteredRecords.length,
                totalReports: this.inspectionReports.length,
                reportTypeStats: this.reportTypeStatistics,
                filterCriteria: { ...this.recordFilterCriteria }
            };
            
            // 生成报告内容
            const reportContent = `
巡查统计分析报告

报告标题：${reportData.title}
生成时间：${reportData.generateTime}

一、数据概览
• 巡查记录总数：${reportData.totalRecords} 条
• 巡查报告总数：${reportData.totalReports} 份
• 筛选条件：${JSON.stringify(reportData.filterCriteria, null, 2)}

二、报告类型分布统计
• 常规巡查报告：${reportData.reportTypeStats['常规巡查报告']} 份
• 专项巡查报告：${reportData.reportTypeStats['专项巡查报告']} 份  
• 应急巡查报告：${reportData.reportTypeStats['应急巡查报告']} 份
• 问题整改报告：${reportData.reportTypeStats['问题整改报告']} 份

三、数据分析
1. 报告类型分析：
   - 常规巡查报告占比：${((reportData.reportTypeStats['常规巡查报告'] / reportData.totalReports) * 100).toFixed(1)}%
   - 专项巡查报告占比：${((reportData.reportTypeStats['专项巡查报告'] / reportData.totalReports) * 100).toFixed(1)}%
   - 应急巡查报告占比：${((reportData.reportTypeStats['应急巡查报告'] / reportData.totalReports) * 100).toFixed(1)}%
   - 问题整改报告占比：${((reportData.reportTypeStats['问题整改报告'] / reportData.totalReports) * 100).toFixed(1)}%

2. 巡查工作评估：
   - 巡查覆盖率：基于当前数据，巡查工作覆盖面较为全面
   - 问题发现率：问题整改报告数量反映了巡查工作的有效性
   - 工作效率：平均每次巡查生成 ${(reportData.totalReports / Math.max(reportData.totalRecords, 1)).toFixed(2)} 份报告

四、建议与改进
1. 继续保持常规巡查的频率和质量
2. 根据实际情况适当增加专项巡查的比例
3. 加强应急响应机制，确保应急巡查的及时性
4. 完善问题整改跟踪机制，提高整改效率

五、总结
本次统计分析基于 ${reportData.totalRecords} 条巡查记录和 ${reportData.totalReports} 份报告数据。
整体巡查工作开展良好，各类型报告分布合理，建议继续保持现有工作水平。

报告生成时间：${reportData.generateTime}
            `;
            
            // 创建下载链接
            const blob = new Blob([reportContent], { type: 'text/plain;charset=utf-8' });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = `${reportData.title}.txt`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
            
            // 提示用户
            ElMessage.success(`分析报告生成成功：${reportData.title}`);
        },
        
        // 查看更多报告封面
        viewMoreReportCovers() {
            this.showReportCoverModal = true;
        },
        
        // 关闭报告封面模态框
        closeReportCoverModal() {
            this.showReportCoverModal = false;
        }
    }
};
</script>
<style scoped>
/* 自定义样式 */
.calendar-container .aspect-square {
    aspect-ratio: 1 / 1;
}

/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}
</style>